Tag: knockout.js

在init和update之间为自定义挖空绑定存储状态的首选方法是什么？

目前我正在使用jQuery数据为dom元素存储状态。 ko.bindingHandlers.customValue = { init: function init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var state = { isEditing: false }; $(element).focus(function focus() { state.isEditing = true; }).blur(function blur() { state.isEditing = false; }).data("customBinding", state); }, update: function update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { // ignore if updating if (!$(element).data("customBinding").isEditing) { // handle update if they are […]

在applyBindings上敲击点击绑定

最近我已经把ViewModel分离到一个单独的JavaScript文件。 var Report = (function($) { var initialData = []; var viewModel = { reports: ko.observableArray(initialData), preview: function(path) { // preview report }, otherFunctions: function() {} }; return viewModel; })(jQuery);​ 这里是HTML和Knockout相关的代码 <script type="text/javascript" src="path/to/report/javascript"></script> <script type="text/javascript"> $(document).ready(function () { ko.applyBindings(Report, document.body); }); </script> HTML用户界面有一个button，点击数据绑定到视图模型中的预览function <input type="button" name="Preview" id="Preview" class="btnPreview" data-bind="click: Report.preview('url/to/report')" /> 在$（document）.ready（）函数中执行以下行时调用问题预览方法 ko.applyBindings(Report, document.body); […]

如何在敲除绑定执行前防止Html显示

我在我的Html中使用下面的敲除脚本： <!– kno ifnot: bla –> <tr><td>some stuff</td></tr> <!– /ko –> 我遇到的问题是，绑定执行之前，这一行将显示一两秒钟。 我怎样才能防止这种情况发生？

我过度使用Knockout贴图插件来做我的viewmodel吗？

我仍然在学习Knockout的正确用法，而且我发现自己在设置我的viewmodel的时候很快就会ko.observable ，而只是定义一个对象字面值并通过映射插件传递给它 var viewModel = ko.mapping.fromJS(data); 或者至less，沿着将所有数据填充到viewModel的一个属性的东西就像这样 var viewModel = { … events etc … , "data": ko.mapping.fromJS(data) } 说实话，我一直这样做的主要原因是要ko.observableArray重复键入ko.observable和ko.observableArray 。 我只是想弄清楚这是否是一个好方法，如果有任何缺点，一起放弃具体的var x = ko.observable()声明。 另外，我正在做这一切的负载，而不是响应任何ajax调用等，从我可以告诉，是映射插件的devise。 在你用knockout工作的时候，你还是一个接一个地手动声明observables，还是用了我使用的mapping.fromJS方法？ 像这样经常使用映射插件有什么具体的缺点吗？ 编辑： 具体例子 在这篇文章中 ，史蒂夫通过这样做来build立自己的观点模型 var initialData = [ { … } , { … } ]; // json from the serializer var viewModel = { gifts : […]

获取input绑定的未捕获错误“NO_MODIFICATION_ALLOWED_ERR”

我从这开始： <script src="/Scripts/jquery-1.6.2.min.js" … <script src="/Scripts/knockout-1.2.1.debug.js" … <script src="/Scripts/knockout.mapping-latest.js" … <script src="/Scripts/jquery.unobtrusive-knockout.min.js" … 然后我从服务器拉一个扁平的JSON对象，并将每个find的属性绑定到DOM中的匹配元素： $.ajax({ url: '/GetRecord', type: 'POST', dataType: 'json', data: JSON.stringify(requestObject), contentType: 'application/json; charset=utf-8', success: function (data) { // Clear the current view model VM.Items.length = 0; // only one item coming from server VM.Items[0] = ko.mapping.fromJS(data.BlankItem); // for each property found, bind […]

我怎样才能从.computed（）可观察到的内部使用knockout的$ parent / $ root伪variables？

在knockout.js绑定expression式中，我可以使用$data ， $parent和$root伪variables 。 当我使用在JavaScript中声明的ko.computed可观察值时，如何获得这些伪variables的等价物？ 我有一个父视图模型与一个孩子的集合，父视图模型有一个selectedChild可观察。 鉴于此，我可以使用数据绑定expression式来添加一个CSS类到当前select的任何一个孩子： <ul data-bind="foreach: children"> <li data-bind="text: name, css: {selected: $data === $root.selectedChild()}, click: $root.selectChild"></li> </ul> <script> vm = { selectedChild: ko.observable(), children: [{name: 'Bob'}, {name: 'Ned'}], selectChild: function(child) { vm.selectedChild(child); } }; ko.applyBindings(vm); </script> 但是我的视angular模型会变得越来越复杂，我想要“我select了吗？” 能够做的不仅仅是将单个CSS类添加到单个元素。 我真的想要一个isSelected计算属性的子视图模型，所以我可以添加其他计算属性，依赖于它。 我已经尝试过写JavaScript引用$data和$root ，在knockout可能定义这些variables的时候，当它调用我的computed评估函数时，它们在某种程度上处于范围之内： { name: 'Bob', isSelected: ko.computed(function(){ return $data === $root.selectedChild(); }) […]

使用数据绑定的敲除模板绑定到图像src属性不起作用

我看不出这里有什么问题，但是使用下面的Knockout模板不能显示图像： <script type="text/html" id="legend-template"> <div><input type="checkbox" data-bind="click : doSomething" ></input> <img width="16px" height="16px" data-bind="src: 'imagePath'" /> <span data-bind="text : label"> </span> </div> </script> 这个绑定的对象看起来像这样： tut.myObject= function (imagePath, label) { this.label = ko.observable(label); this.imagePath = ko.observable(imagePath || liveString + '/Contenthttp://img.dovov.commarker.png'); }; tut.myObject.prototype = { doSomething: function () { alert("do what?"); } }; 当呈现HTML对象时，我看到标签并点击checkbox调用doSomething。 TIA。

在Knockout中对可观察数组进行sorting

我有一个可观察的数组在人对象的淘汰赛。 我希望能够根据姓氏对人员名单进行sorting。 问题是该列表有许多重复的姓氏。 结果是，当有多个姓氏时，姓氏显示为他们被发现的名字。 我希望能够按姓氏sorting数组，当有多个姓氏时，也可以按名字sorting。 我为用户使用文本input来开始input姓氏。 结果绑定到显示所有匹配的模板。 <input data-bind="value: filter, valueUpdate: 'afterkeydown'"> 这里是我的淘汰arraysfilter代码： function Item(firstname, lastname) { this.firstname = ko.observable(firstname); this.lastname = ko.observable(lastname); } var playersViewModel = { items: ko.observableArray([]), filter: ko.observable("") }; var players; $(function() { playersViewModel.filteredItems = ko.computed(function() { var filter = this.filter().toLowerCase(); if (!filter) { return this.items(); } else { return ko.utils.arrayFilter(this.items(), […]

使用包含前缀的knockoutjs设置id属性

我使用KnockoutJS遍历一个对象，如下所示： 现在这一切工作。 但是我遇到的问题是它将button的id设置为一个数字。 所以看起来像这样： <button id="1">Button 1</button> <button id="3">Button 2</button> <button id="8">Button 3</button> 所以我试图在“Id”属性前加一个前缀，就像这样： <div data-bind="foreach:Items"> <button data-bind="text: Name, attr: {'id': 'myprefix_' + Id}"></button> </div> 但是，这似乎并没有工作。 当我这样做时，我的id被充满了Knockout可观察的function… 所以我的问题是，我如何添加一个前缀，当我指定一个字段的id属性？

KnockoutJS中的数字格式规则

我有一个有很多小数位的数字视图模型。 如果我的绑定是这样的： <tr> <td data-bind="text: Date"></td> <td data-bind="text: ActualWeight"></td> <td data-bind="text: TrendWeight"></td> </tr> 那么，当然，输出具有所有的小数位，是非常不可读的。 改变绑定看起来像这样解决了这个问题，但是非常冗长和“嘈杂”： <tr> <td data-bind="text: Date"></td> <td data-bind="text: ActualWeight().toFixed(1)"></td> <td data-bind="text: TrendWeight().toFixed(1)"></td> </tr> 请注意，这是一个小的片段，不得不添加.toFixed（1）我绑定一个数字的每个地方导致比这里显示的更加凌乱的标记。 除了数字之外的所有东西，覆盖toString一直是我控制输出结果的一个有效方法。 任何build议的方式来告诉淘汰赛一次，在我的网页的一些中心方式之前，将数字转换为string之前，他们被添加到输出？ 对于这个问题，有一个通用的方式来告诉淘汰赛如何格式化任何types的值似乎是有用的。 重写Date.prototype.toString的作品，但感觉有点沉重，因为它可能会影响其他使用.toString除了淘汰赛的。