Questions tagged «knockout.js»

Knockout.js是使用模型-视图-视图模型（MVVM）模式的动态HTML UI的开源JavaScript库。

9
如何清除/删除Knockout.js中的可观察绑定？
我正在将功能构建到用户可以执行多次的网页上。通过用户的操作，使用ko.applyBindings（）创建对象/模型并将其应用于HTML。 数据绑定的HTML是通过jQuery模板创建的。 到目前为止，一切都很好。 当我通过创建第二个对象/模型并调用ko.applyBindings（）重复此步骤时，遇到两个问题： 标记显示先前的对象/模型以及新的对象/模型。 尽管对象/模型中的属性之一仍在标记中呈现，但仍会发生JavaScript错误。 为了解决这个问题，在第一遍之后，我调用jQuery的.empty（）来删除包含所有数据绑定属性的模板化HTML，以使其不再存在于DOM中。当用户开始第二遍的处理时，将数据绑定的HTML重新添加到DOM。 但是就像我说的那样，当HTML重新添加到DOM并重新绑定到新的对象/模型时，它仍然包含来自第一个对象/模型的数据，并且我仍然遇到未发生的JS错误。在第一遍。 结论似乎是，即使从DOM中删除了标记，淘汰赛仍保留了这些绑定属性。 因此，我正在寻找一种从淘汰赛中删除这些绑定属性的方法。告诉淘汰赛，不再有可观察的模型。有没有办法做到这一点？ 编辑 基本过程是用户上传文件；然后服务器使用JSON对象进行响应，将数据绑定的HTML添加到DOM，然后使用以下方法将该JSON对象模型绑定到该HTML mn.AccountCreationModel = new AccountViewModel(jsonData.Account); ko.applyBindings(mn.AccountCreationModel); 用户在模型上进行了一些选择后，将同一对象发布回服务器，从DOM中删除了数据绑定的HTML，然后得到了以下JS mn.AccountCreationModel = null; 当用户希望再次执行此操作时，将重复所有这些步骤。 恐怕代码太“涉及”以至于无法进行jsFiddle演示。
4
如何有条件地将项目推入可观察数组？
我想在上添加push一个新项目observableArray，但前提是该项目尚不存在。在KnockoutJS中是否有任何“查找”功能或推荐模式可实现此目的？ 我注意到，上的remove函数observableArray可以接收用于传递条件的函数。我几乎想要相同的功能，但是仅在传入的条件为true或不为true时才推送它。
103 knockout.js 
4
调用ko.applyBindings时获取“无法读取null的属性'nodeType'”
我有此基因剔除代码： function Task(data) { this.title = ko.observable(data.title); this.isDone = ko.observable(data.isDone); } function TaskListViewModel() { // Data var self = this; self.tasks = ko.observableArray([]); self.newTaskText = ko.observable(); self.incompleteTasks = ko.computed(function() { return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() }); }); // Operations self.addTask = function() { self.tasks.push(new Task({ title: this.newTaskText() })); self.newTaskText(""); …
4
确定对象属性是否为ko.observable
我正在使用KnockoutJS版本2.0.0 如果我遍历对象的所有属性，如何测试每个属性是否为ko.observable?？到目前为止，这是我尝试过的方法： var vm = { prop: ko.observable(''), arr: ko.observableArray([]), func: ko.computed(function(){ return this.prop + " computed"; }, vm) }; for (var key in vm) { console.log(key, vm[key].constructor === ko.observable, vm[key] instanceof ko.observable); } 但是到目前为止，一切都是假的。
4
如何在数据绑定视图中对If-Else结构进行模板化？
我经常发现自己在基于KO的HTML模板中使用这个惯用法： <!-- ko if: isEdit --> <td><input type="text" name="email" data-bind="value: email" /></td> <!-- /ko --> <!-- ko ifnot: isEdit --> <td data-bind="text: email"></td> <!-- /ko --> 在KO中，有没有更好/更干净的方法来进行条件处理？还是有比仅使用传统的if-else构造更好的方法？ 另外，我只想指出某些版本的Internet Explorer（IE 8/9）无法正确解析上述示例。请参阅此SO问题以获取更多信息。快速总结是，不要在表格标签内使用注释（虚拟绑定）来支持IE。使用tbody代替： <tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>
4
如何在一个元素上具有多个数据绑定属性？
我需要在一个元素上具有多个数据绑定。例如，我要在一个标签上href同时进行html数据绑定。我已经试过了 a <a data-bind="html: name" data-bind="attr: { href: url }" data-bind="attr: { 'data-prop': xyz }"> </a> 但这是行不通的。敲除似乎只支持绑定一个 data-bind属性？如何在一个元素上同时绑定href，内部html和自定义data-prop属性？
1
如何使用jQuery-Mobile和Knockout.js构建Web应用程序
我想构建一个移动应用程序，仅用html / css和JavaScript编写。虽然我对如何使用JavaScript构建Web应用程序有相当的了解，但我认为我可以研究一下jquery-mobile之类的框架。 起初，我认为jquery-mobile只是针对移动浏览器的小部件框架。与jquery-ui非常相似，但适用于移动世界。但我注意到jquery-mobile不仅如此。它带有许多体系结构，让您使用声明性html语法创建应用。因此，对于最容易思考的应用程序，您无需自己编写一行JavaScript（这很酷，因为我们都喜欢减少工作量，不是吗？） 为了支持使用声明性html语法创建应用程序的方法，我认为将jquery-mobile与kickoutjs结合起来是一个好方法。Knockoutjs是一个客户端MVVM框架，旨在将WPF / Silverlight中已知的MVVM超级功能引入JavaScript世界。 对我而言，MVVM是一个新世界。虽然我已经阅读了很多关于它的内容，但是我以前从未真正使用过它。 因此，这篇文章是关于如何一起使用jquery-mobile和kickoutjs构建应用程序的。我的想法是写下看了几个小时后想到的方法，并用一些jquery-mobile / knockout yoda进行评论，向我展示为什么它很烂，以及为什么我不应该一开始就进行编程地方;-) HTML jquery-mobile很好地提供了页面的基本结构模型。尽管我很清楚以后可以通过ajax加载我的页面，但我只是决定将所有页面保存在一个index.html文件中。在这种基本情况下，我们谈论的是两页，因此掌握所有内容并不难。 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.0a4.1.css" /> <link rel="stylesheet" href="app/base/css/base.css" /> <script src="libs/jquery/jquery-1.5.0.min.js"></script> <script src="libs/knockout/knockout-1.2.0.js"></script> <script src="libs/knockout/knockout-bindings-jqm.js" type="text/javascript"></script> <script src="libs/rx/rx.js" type="text/javascript"></script> <script src="app/App.js"></script> <script src="app/App.ViewModels.HomeScreenViewModel.js"></script> <script src="app/App.MockedStatisticsService.js"></script> <script src="libs/jquery-mobile/jquery.mobile-1.0a4.1.js"></script> </head> <body> <!-- Start …
2
击倒.js中$ parent的访问索引
在基因敲除（snockout.js）2.1.0中，在使用foreach绑定的模板中，您可以通过$ index（）函数访问当前项目的索引。在嵌套的foreach绑定中，是否有任何方法可以从模板访问$ parent的索引？ 说我有一个像这样的数据结构： var application = { topModel: [ { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0 {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1 }, { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:1 sub:0 }, { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this …
10
选择带有敲除绑定的更改事件，我怎么知道它是否是真正的更改
我正在构建一个权限UI，我有一个权限列表，每个权限旁边都有一个选择列表。权限由绑定到选择列表的可观察对象数组表示： <div data-bind="foreach: permissions"> <div class="permission_row"> <span data-bind="text: name"></span> <select data-bind="value: level, event:{ change: $parent.permissionChanged}"> <option value="0"></option> <option value="1">R</option> <option value="2">RW</option> </select> </div> </div> 现在的问题是这样的：当UI首次填充时，将引发change事件。我调用ajax函数，获取权限列表，然后为每个权限项引发事件。这真的不是我想要的行为。我希望仅当用户确实在选择列表中为权限选择了新值时才引发它，我该怎么做？
12
在大数据集下，Knockout.js的运行速度极其慢
我刚刚开始使用Knockout.js（总是想尝试一下，但是现在我终于有了一个借口！）-但是，将表绑定到相对较小的一组表时，我遇到了一些非常糟糕的性能问题数据（大约400行左右）。 在我的模型中，我有以下代码： this.projects = ko.observableArray( [] ); //Bind to empty array at startup this.loadData = function (data) //Called when AJAX method returns { for(var i = 0; i < data.length; i++) { this.projects.push(new ResultRow(data[i])); //<-- Bottleneck! } }; 问题是for上面的循环大约需要30秒左右，大约需要400行。但是，如果我将代码更改为： this.loadData = function (data) { var testArray = []; //<-- Plain …
8
将正确/错误绑定到Knockout JS中的单选按钮
在我的视图模型中，我有一个IsMale值，该值的值为true或false。 在我的用户界面中，我希望将其绑定到以下单选按钮： <label>Male <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/> </label> <label>Female <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/> </label> 我认为的问题是checked期望一个字符串“ true” /“ false”。所以我的问题是，如何获得带有此UI和模型的2向绑定？
1
kickout.js-从DOM元素获取ViewModel
是否有可能从给定的DOM元素获取绑定的ViewModel JavaScript对象？ ko.applyBindings( gLoginViewModel, document.getElementById("login-form") ); ko.applyBindings( gLoginViewModel, document.getElementById("register-form") ); 和其他地方-在不相关的代码中-像这样： var viewModel = ko.getViewModel( formElement ); viewModel.someObservable( someData ); // observable available in all ViewModels 如果我可以做些更好的话： var viewModel = ko.getViewModel( someChildElement );
2
使用if绑定使用$ index的kickout.js
我试图基于的值显示一些标记$index，我可以显示该值，但似乎无法将其与if绑定一起使用，这里的最佳方法是什么？ <!-- ko if: $index===0 --> <div>some mark up here</div> <!-- /ko -->
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.