Tag: knockout.js

KnockoutJS可排序组observableArray by field和conditionally sort

我最近使用了RP Niemeyer， KnockoutJS ObservableArray数据分组的一个很好的堆栈溢出答案，允许我通过字段将数据分组到observableArray中。 这工作非常出色。 问题是它与Knockout Sortable的搭配并不好。 检索sourceParent存在问题。 请参阅以下小提琴： http ： //jsfiddle.net/mrfunnel/g6rbc 基本上我有一个嵌套列表，其中任务被分组为路由（未预定）和另一个仅任务列表（预定）。 我希望能够将路线和任务拖到预定的位置。 如果拖入路线，则需要将其拆分为任务。 任何帮助将不胜感激。

使用JSONP调用ajax返回错误Uncaught ReferenceError：未定义jquery19102754115150310099_1392753827782

以下代码派生自现有的Knockout jsfiddle，它现在不起作用，主要是由于当前版本的knockout和jquery已经过时了。 我发现这个小提琴作为Knockout GitHub wiki食谱链接的一个例子列出： https ： //github.com/knockout/knockout/wiki/Asynchronous-Dependent-Observables 。 即使在我对代码进行了一些更新之后，此链接中的小提示也不起作用。 我在Ajax调用上很弱，需要帮助才能理解为什么这不起作用。 最初的小提琴列在链接http：//jsfiddle.net/uv5AG/ 我已经在一个新的jsfiddle中修改了它，它更新，并且除了AJAX调用之外还可以工作。 它位于： http ： //jsfiddle.net/n4gy3/Gf3gW/3/ 我的用例是我想使用GitHub站点中记录的function，使用asyncDependentObservable构建一个带有knockout的灵活viewModel。 我也在一个dotnet网站上尝试了这个，它给出了同样的错误，所以这不应该与处理跨站点AJAX请求的jsfiddle奇怪的方式有关。 我认为主要问题是代码在运行以下ajax请求时抛出exception。 self.fetchedData = asyncDependentObservable(function () { return $.ajax(“http://api.worldbank.org/country?prefix=?”, { dataType: “jsonp”, data: { per_page: this.numberToShow, region: this.chosenRegion, format: “jsonp” } }).pipe(function (results) { console.log(results); debugger; return results[1]; }); 我修改了pipe（）方法的链接，并替换为then（），因为在更高版本的JQuery中不推荐使用管道。 查看来自ajax调用的结果它似乎运行成功并且jquery返回以下内容，javascript尝试执行，这似乎抛出错误。 可能是问题是.then（）不是修复示例的正确方法。 我注意到那个块永远不会执行。 如果我用completed（）替换它确实执行但我得到相同的错误。 我很迷惑。 jquery19102754115150310099_1392753827782([{“page”: 1,”pages”: […]

Knockout js如何实现倒数计时器

我是Knockout js的新手。要使用knockout js在html上实现倒数计时器 为此，我在视图上添加了4个html元素（输入，跨度和开始，停止按钮）。 按下开始按钮时，写入对象的值应该传递给refreshViewModel ，并且会有倒计时过程。 当倒计时处理时，剩余时间将显示在元素内。 如果按下停止按钮，将停止倒计时。 如果倒计时完成另一个函数（即从另一个viewModel回调），那么将启动一个过滤页面的函数。 绑定文本框值以跨越值。 我无法弄清楚如何计算和显示内部动态的剩余值？ HTML： Reload Interval / 15 second(s) JS： @Url.Content(“~/Content/App/viewModels/listCasesViewModel.js @Url.Content(“~/Content/App/viewModels/RefreshPageTimerViewModel.js $(document).ready(function () { var viewModel = new ListCasesViewModel(); viewModel.init(); var pnl = $(“#pnlFilterPanel”).get()[0]; ko.applyBindings(viewModel, pnl); var viewModelTimer = new RefreshPageTimerViewModel(); viewModelTimer.init(); var pnlTimer = $(“#pnlTimer”).get()[0]; ko.applyBindings(viewModelTimer, pnlTimer); viewModelTimer.callBackMethod = viewModel.filter; }); 第一个viewModel：RefreshPageTimerViewModel： var RefreshPageTimerViewModel = […]

从外面敲出可拆卸的拖放

也许有人可以帮助我。 我在webapp中获得了大量的视图。 左侧有产品列表，右侧有类别列表。 产品应该在类别中拖动。 产品清单是一个可观察的arrays。 现在，当列表有超过1000个条目时，我们遇到了性能问题（特别是在IE上）。 因此，因为产品本身不会改变，我们将它们从敲除绑定中取出，将它们连接在一个字符串中并仅附加一个节点。 当然，淘汰赛可排序的绑定不再起作用了…… 这是类别的模板： ID: 这是左侧产品列表的js代码： function fillAllProductsTab() { var parts = ”; allProducts.forEach(function (item) { parts += ” + // draggable=”{data: $data, options:{containment: \’\#menuEditTab3Ce\’, revert: \’invalid\’}}” ” + ” + item.Name + ” + ‘ID: ‘ + item.Id + ” + ” + item.Price + ‘ €’; }); $(“#allp”).append(parts); […]

KnockOutJs对象没有发布

我正在研究一个KnockOutJs示例，并且在MVC3上遇到了一些问题。 我的示例在使用整页回发时正确发布。 当我尝试使用jQuery Ajaxpost进行保存时，我可以看到使用Firebug .NET查看器中的Post是： {gifts：[{“GiftId”：0，“Title”：“sad”，“Price”：3}]} 当我在MVC3中的ModelBinder中查看ControllerContext时，表单参数为空，json不绑定。 关于发生了什么的任何想法？ 我尝试了许多配置，但这里是jQuery发布代码（目前硬编码为静态值）： … $.ajax({ url: “/Home/PartialUpdate”, type: ‘POST’, cache: false, data: ‘{ gifts:[{“GiftId”:0,”Title”:”sad”,”Price”:3}] }’, //ko.toJSON({ gifts: this.gifts }), dataType: ‘json’ , contentType: “application/json;”, success: function(result){ alert(result); var data = ko.utils.parseJson(result); this.gifts = ko.observableArray(data) ; }, error:function(xhr,err){ alert(“readyState: ” + xhr.readyState+”\nstatus: “+xhr.status); alert(“responseText: ” + xhr.responseText); } }); 编辑：这是Ajax更新代码的MVC3操作代码 […]

使用Knockout JS和Jquery Template的递归tr

我疯了，试图为我的问题找到解决方案。 我有一个JS对象，它具有层次结构，层次结构的级别是未知的。 利用JQuery模板和Knockout JS，我可以使用 ＆ 获取树结构，但我的要求是，对于每个孩子，我需要在Table呈现一个新的Row所以假设我的结构是： { Name: ‘First’, Total: 100, Set: [ { Name: ‘First_1’, Total: 30, Set: [{Name: ‘First_1_1’, Total: 10}, {Name: ‘First_1_2’, Total: 20}] }, { Name: ‘First_2’, Total: 0 } ] } 该表应如下所示： NameTotal First100 First_130 First_1_110 First_1_220 First_20 以下是我提出的小提琴： http ： //jsfiddle.net/paragnair/xpsa4/ 如果我使用ul li ，我可以通过使用递归调用模板 但由于我的模板本身以 开头，我不知道如何在不编写带有data-bind=”template:{…}部分的节点的情况下调用模板？初始调用将起作用，因为它在 但是我不能在tbody中有一个tbody以递归方式调用模板来渲染其他tr 。 我希望这个解释已经足够了。 […]

使用jquery更新字段不会更新observable

我想向stackoverflow社区问好。 我几天前刚刚开始使用淘汰赛。 正确知道我正在使用它为我正在开发的CMS制作动态菜单构建器。 这是代码： http ： //jsfiddle.net/dnlgmzddr/HcRqn/ 问题是，当我从选择框中选择一个元素时，输入字段会按照我的预期更新，但是observable不会反映更改。 因此，未启用添加按钮。 我错过了什么？ 我该如何解决？ 谢谢。

使用模型值MVC4进行Ajax发布和重定向

我通过带有json数据的agax post提交页面，然后重定向到其他视图。 它工作正常。 $.ajax({ url: ‘/bus/result’, type: “POST”, dataType: “json”, contentType: “application/json; charset=utf-8”, data: ko.toJSON(bookingInfo), success: function (data, textStatus, xhr) { window.location.href = data.redirectToUrl; } }); MVC控制器 [AcceptVerbs(HttpVerbs.Post)] public ActionResult Result(BusBookingInfo bookingInfo) { if (Request.IsAjaxRequest()) { return Json(new { redirectToUrl = Url.Action(“Booking”) }); } //return Redirect(“/bus/booking/”); return RedirectToAction(“result”); } 但现在我想将bookingInfo对象传递给Booking视图。 我知道我可以通过查询字符串但是可以绑定这个模型对象预订视图吗？

在typescript中使用成功回调$ .get时，无法将数据绑定到类变量

我正在使用TypeScript 。 我试图将来自rest API的响应绑定到ViewModel的变量，如下所示： export class TestListViewModel { public personItems: KnockoutObservableArray; constructor() { this.personItems = ko.observableArray([]); this.person1 = new Person(); this.person1.name = ko.observable(“Test 1”); this.person1.ssnId = ko.observable(“1234”); this.personItems.push(this.person1); //If i put a debugger here and see the “this.personItems()” in console //I can see 1 object in personItems $.get(“https://somerestapi/api/TestLists”, (data: any) => { for (var index […]

如何停止两次Knockout 3.2库加载

我有绑定表达式的问题，如 -where Property是一个可观察的 – 导致显示knockout的可观察函数的实际文本而不是Property应该表示的值。 这在此处讨论在IE8中，KnockoutJS 3.2显示实际可观察​​函数而不是可观察值 。 该问题的原因是正在加载重复的淘汰库文件。 “更新：”部分和链接的SO问题的答案包括一些细节。 我现在需要知道如何防止敲除库被加载两次。 强调加载不仅仅是执行。 到目前为止，我还没有找到任何可以解决这个问题。 RequireJS：由网站使用，但不是由调查页面使用。 SignalR：由页面使用。 我对SignalR有点不熟悉，所以我不能说这会导致多次加载的可能性有多大。 Ajax：也可以使用，但它用于接收JSON数据。 敲除库只有一个明确的引用。 查看网络选项卡，第一个文件是从IE的推测下载function加载的。 第二个文件来自主解析器。 第一个文件已完全下载，然后第二个文件已完全下载。 我无法弄清楚的是一种保持方式： Lookahead Downloader首次下载文件 主要解析器第二次下载文件 第二次执行文件而不更改库文件中的代码。 在这一点上，上述解决方案之一是可以接受的。 任何人都可以提供见解，建议或知道解决方案吗？