Tag: knockout.js

Knockout JS treeview与复选框: 我的淘汰应用程序中有一个模块，我想要一个带有复选框的树型结构。我想要实现的目标如下如果我选择子节点，则该节点中的所有父节点和祖父节点都会被选中但具有不同的图标。像这样的东西如果用户选择父级，则选择其所有子级在开始为它制作我自己的插件之前，淘汰赛有没有类似的东西，我可以作为基础并在其上构建吗？

observableArray不更新UI: 我遇到的问题是，在刷新页面后，UI仅使用正确的数据进行更新。我来自这里observableArray没有定义我的JS代码： define( [‘knockout’], function (ko) { “use strict”; return { onLoad: function (widget) { widget.getDetails= function (prod) { var abc = prod.DetailsNumbers(); console.log(abc); var someArray= []; someArray= abc.split(‘,’); //console.log(someArray); widget.anotherObservableArray = ko.observableArray(); for (var i = 0; i < someArray.length; i++) { var temp = { "prodName": ko.observable(someArray[i]) }; var myKoObservableArray = widget.anotherObservableArray; […]

afterRender如何运作knockout.js？: 关于knockout.js的afterRender的文档对我来说并不清楚。它的目的是什么，我们如何使用它？有哪些主要用法示例？

如果在返回模板之前删除了元素，则Knockout组件将失败: 我有一个KO自定义绑定，它向页面添加一个组件（作为虚拟元素，但我认为这不重要），然后将视图模型应用于它。组件通过服务器的require加载它的模板。但是在加载过程中我遇到了一个问题，即更新自定义绑定并从页面中删除元素（如果不需要，我想让它整洁一下）。这会导致竞争条件 – 如果在KO尝试应用组件时删除元素之前模板的异步查找尚未完成，则无法找到结束标记并引发错误。我想知道是否有任何人可以建议缓解这个问题？我已经知道applyBindings上没有回调机制，我不认为 afterRenderCallback会在它到达之前发生错误。我想知道是否有办法取消，停止或中止该过程，但没有。有任何想法吗？这是一个演示我的问题的小提琴。我的自定义绑定看起来像这样： ko.bindingHandlers.customBinding = { update: function(element, valueAccessor){ var $element = $(element) if(ko.unwrap(valueAccessor())){ $element.data(“controller”, new CustomBindingController(element)); } else { var controller = $element.data(“controller”); if(controller){ controller.destroy(); $element.removeData(“controller”); } } } } 它正在调用控制器类，如下所示： function CustomBindingController(element){ var self = this, $element = $(element), $component; function […]

找到合适的DOM元素: 以下是我的模型：和我的viewmodel： function TimeCardViewModel() { var self = this; self.teamMembers=ko.observableArray(); } function TeamMemberViewModel(data){ var self=this; self.days=ko.observableArray(); for (var i=0; i<7; i++) { self.days.push(new DayViewModel(…); } } function DayViewModel(shifts){ var self=this; self.shifts=ko.observableArray(); for (var i=0; i<shifts.length; i++) { self.shifts.push(new ShiftElementsViewModel(…); } } function ShiftElementsViewModel(a,b,c,d) { var self=this; self.startTime=ko.observable(a); self.endTime=ko.observable(b); } var timeCardViewModel=new TimeCardViewModel(); ko.applyBindings(timeCardViewModel); 对于每个成员，我们（一周中的七天中的每一天）都有一些class次。对于每个class次，我们都有成对的startTime-endTime输入。 […]

在淘汰应用程序中使用setInterval进行轮询实现？: 我试图使用setInterval实现简单的轮询机制。我有一个Viewmodel如下： define([ ‘knockout’, ‘jquery’, ], function ( ko, $) { function ViewModel() { var self = this; //setInterval( function() { $.ajax({url: “”, async: false,timeout: 3000, success: function (data) { // some operation }, dataType: “json”}); //}, 3000); } return ViewModel; }); 到此为止，它可以很好地调用ajax调用返回数据并进行操作。如何使用setInterval使ajax调用在一定时间间隔后返回数据，以便更新ViewModel并在UI中刷新数据？如果我取消注释setInterval块，那么ViewModel不会返回到DOM。我认为setInterval是异步的。任何解决方案表示赞赏

嵌套json的Knockout映射: 我试图创建一个json架构查看器和编辑器。我需要将动态生成的嵌套json显示为嵌套表，并且必须能够编辑它们或添加新的。因为我试图将嵌套的json映射到knockout observable并将它们显示为嵌套表 JSBin示例但我没有映射它可以帮助我正确映射它并帮助我安排子表作为下一个’tr’。我没有收到任何错误，但没有显示值。

knockout.js将表单保存到json: 我使用knockout.js和映射插件映射我的表单。我准备将表单保存到json并将其发送回服务器。这是我第一次这样做，这是最简单的方法吗？这是我到目前为止： // Here’s my data model var viewModel; $.getJSON(‘/myJSONdata’, function (data) { viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel); }); //convert mapped data to json format var jsonData = ko.mapping.toJSON(viewModel); // Do something to send the form data in json format back to the server on form submit Do you agree? Yes No Submit

knockoutjs值限制绑定: 我正在使用knockoutjs来实现购物车。其中一个要求是允许客户更改项目数量。所以我自然而然在我的视图模式中，我将Item ViewModel定义为 Item = function(){ … _self.quantity = ko.observable(1); … } 但是还有一个要求是购物车中的总金额应该有一个上限。我可以使用jquery拦截“更改”事件并在那里添加一些逻辑，但我想知道是否有任何本机淘汰方式来做类似的事情 <input type="text" data-bind="value: quantity where quantity*uniprice

使用KnockoutJS加载日历事件: 我一直在努力解决这个问题。我无法将事件绑定到我的fullcalendar。我不知道该怎么做。我读过很多关于绑定但没有成功的文章。我的数据未加载，我没有收到任何错误。我的问题是我需要为我的活动创建自定义绑定吗？视图模型 function CalendarVM() { this.calendarViewModel = ko.observable(); this.viewDate = ko.observable(Date.now()); // Observable functions this.LoadCalendar = function (events) { var self = this; //alert(self.calendarEvents().length); $(‘#calendar’).fullCalendar({ header: { left: ‘prev,next today’, center: ‘title’, right: ‘month,agendaWeek,agendaDay’ }, theme: true, selectable: true, selectHelper: true, editable: true, viewDate: self.viewDate, defaultView: ‘month’, eventLimit: true, // […]