knockout.js | 易学教程

what is the difference between  binding and visible binding in knockout?

阅读更多关于 what is the difference between binding and visible binding in knockout?

问题 ko  binding and data-bind="visible:sometext" binding Both binding did the same operation and which one is efficient for use and which one is best 回答1:  allows you to bind to an virtual element. data-bind="[binding]" is a regular binding and can only be applied to actual elements. The difference is that the first can be used without having to create an element: <ul> <li class="heading">My heading</li>  <li data-bind="text: $data"></li> <!

Why won't my submit from Knockout bind to my MVC Model

阅读更多关于 Why won't my submit from Knockout bind to my MVC Model

问题 I have a knockout model that is feeding my page and on a save the following code is executed client side. self.save = function() { var tirerun = ko.mapping.toJSON(self.data()); $.ajax({ type: 'post', url: "@Url.Action("SaveTireRunModel", "Events")", data: tirerun, success: function(result) { if (!result.success) { alert(result.error); } else {} } }); }; It then posts the following JSON to my server (From fiddler and cropped for brevity) With the following http request header POST http:/

Knockout.js and mapping plugin not deep translating

阅读更多关于 Knockout.js and mapping plugin not deep translating

问题 I use a json object to handle my menus and breadcrumbs. Now below you can see that the first two "Navigation" nodes are observable, but the last one isn't. It is just a regular array for some reason. Does the mapping plugin not deep clone the object? Firebug output: app.viewModel.members.layout().Navigation()[2].Navigation()[1].Navigation() <-- errors Initialization: app.viewModel.members.layout(ko.mapping.fromJS(json.Layout)); json.Layout JSON: { "Layout": { "Navigation": [ { "ID":

Proper way to execute a script tag in a Knockout HTML template

阅读更多关于 Proper way to execute a script tag in a Knockout HTML template

问题 I have the simple html page, where simple ul list defined with following viewmodel for it: <div class="row"> <div class="col-md-6"> <button class="btn btn-link" data-bind="click: addItem">Add item</button> <ul data-bind="foreach: listItems"> <li> <p data-bind="text: itemText"></p> <script> $(document) .ready(function() { console.log("new li has added"); }); </script> </li> </ul> </div> <div class="col-md-6"> <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> </div> </div> <script>

Knockout not displaying when a value changes

阅读更多关于 Knockout not displaying when a value changes

问题 I am trying to use knockout to hide text if greater than a certain value. For some reason I cant get it to work. When I click the test button the second text field should show.. <body class="calc" onLoad="createnav()"> <input type="button" value="test" /> <p data-bind="text: 'This shows', if: 6 > 4" ></p> <br> <p data-bind="text: 'This does Not', if: 6 > qty"></p> Here is the script: function AppViewModel() { this.qty = ko.observable("1"); } // Activates knockout.js var app = new AppViewModel

How to include observables in computed and get around resharper warning?

阅读更多关于 How to include observables in computed and get around resharper warning?

问题 I'm trying to get around a resharper warning about unused variables. Here is my current function: self.contentDimensions = _i.ko.computed(function () { var fakeVarToFireComputed = self.contentSize() + self.ListLength(); var firstEl = _i.$(itemSelector, self.viewRef()).first(); if (firstEl.length > 0) { return { width: firstEl.outerWidth(true), height: firstEl.outerHeight(true) }; } else { return self.contentDimensions(); } }, this, { deferEvaluation: true }); But since fakeVarToFireComputed

Knockout Validation validatedObservable group error

阅读更多关于 Knockout Validation validatedObservable group error

问题 I have a group of items that I need to validate as a whole. I setup a validatedObservable on the group, but the error message doesn't display. I have a simplified example here. I want each number to be between 0-100 and the sum to be exactly 100. How do I handle this kind of validation? Update: I know in this example I could just make a ko.computed and validate that, but that's not what I need. Example: http://jsfiddle.net/CGuW2/5/ 0-100:<input data-bind="value: num1, valueUpdate:

Foreach loop for binding key/value ObservableArray

阅读更多关于 Foreach loop for binding key/value ObservableArray

问题 I'm trying to create a menu based on an observablearray filled with menu items. I also have div's which should get visible when the menu item is clicked, the problem is that these div's had visible bindings based on the array position of their specified menu item. This worked till i tried to remove/add some menu item to the array and i realised it is a horrible way of binding the menu items to the divs. As a solution I decided to use a key/value observablearray so it wouldn't matter if a menu

Mapping JSON with knockout fails to populate type defined object properties

阅读更多关于 Mapping JSON with knockout fails to populate type defined object properties

问题 I'm trying to map JSON data using the knockout.mapping plugin, however the heirarcical JSON data fails to populate my object properties correctly, the top level loads fine but not the child 'RootTarget' data? What am I doing wrong? Knockout Javascript var Query = function(json) { this.ID = ko.observable(0); this.Name = ko.observable(); this.RootTargetID = ko.observable(); this.RootTarget = ko.observable(); var mapping = { 'RootTarget': { create: function (args) { return new QueryTarget(args

RequireJS randomly loads wrong filename with AMD modules

阅读更多关于 RequireJS randomly loads wrong filename with AMD modules

问题 I have my config (main.js) defined as: require.config({ urlArgs: "bust=" + (new Date()).getTime(), paths: { jquery: 'jquery-1.8.3.min', knockout: 'knockout-2.2.0', komapping: 'knockout.mapping-latest', token: 'jquery.tokeninput' }, shim: { 'token': ['jquery'] } }); EDIT main.js is a shared configuration. I have several pages that all use the same setup and I don't want to need to modify version-specific filenames all over the place in my project. /EDIT and included in the page as: <script src