Tag: knockout.js

点击链接后closures引导程序下拉菜单: 下面有一个引导下拉菜单。它有一个链接，它连接到一个knockout.js绑定，返回false，因为我不希望＃标签发送到浏览器的url。但是，这样做不会closures下拉菜单，当我点击链接。无论如何，这个呢？ HTML <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: !noResults()"><i class="icon-download-alt" ></i> Export <span class="icon-caret-down"></span></button> <ul class="dropdown-menu"> @foreach(var exportUrl in Model.ExportUrls) { <li> <a href="#" data-bind="disable: noResults(), download: { url: '@exportUrl.Value', data: data }"><img src="/Content/lesshttp://img.dovov.comimg/@(exportUrl.Key.ToString().ToLower()).png" alt="@exportUrl.Key.GetDisplayName()"/> @exportUrl.Key.GetDisplayName()</a> </li> } </ul> </div> knockut.js绑定 ko.bindingHandlers.download = { init: function (element, valueAccessor) { var value […]

为什么Chrome在隐藏大型Knockout元素时使用更多的CPU？: 我有一个使用Knockout.js 2.2.1的单页web应用程序来显示来自服务器的信息stream（使用socket.io，尽pipe我不这么认为）。这个应用程序还包含一个大型的数据表，它是使用Knockout的foreach绑定从一个JSON对象创build的。（桌子很大，但不是很大：20列，200列左右。）由于表格很大，用户可以通过点击button来打开/closures表格。数据<table>被放置在一个<div>元素中，我可以使用jQuery的.show()和.show()方法隐藏/显示（基本上通过设置和清除<div>上的CSS display: none ）。所有这些function的作品。不过，我注意到，在closures（隐藏）大数据表之后，如果Knockout生成的表足够大，Chrome的CPU使用率将跳转至100％。更有趣的是，这只发生在用户点击包含表格的<div>元素内的某个地方之后。当表被隐藏（并且CPU使用率高）时，单击页面上的其他位置将使CPU使用率恢复正常。这个过程将会重复。另一个可能有用的注意事项：如果我停止从服务器的stream数据，这个问题不会发生（或者，CPU使用率不明显）。在此页面上有一个Knockout视图模型，它pipe理来自服务器的stream式数据以及从JSON对象创build此数据表。这两组数据在其他方面是完全分开的 – 没有任何更改的数据显示在表中，并且表中不包含事件绑定回到视图模型。就好像Knockout模型的stream式数据更新正在导致数据表上的工作，即使没有stream数据被绑定到表上。而且只有当表格不显示时才这样做！快速总结： Web应用程序在加载页面时使用Knockout来呈现大型数据表。这个表在$(document).ready中启动时隐藏了.show() ，但是在点击一个button之后使用.show()显示，并且可以再次隐藏如果鼠标在数据表内部被点击，则表格被隐藏后，Chrome中的CPU使用率将跳至100％。单击页面上的任何其他内容都会使CPU使用恢复正常。其他相关信息： Chrome浏览器JavaScript分析器显示CPU使用率高，但它被简单地分类为（程序）时间。 Windows上的IE10和Firefox 20都没有显示这个问题。任何想法这里发生了什么事情，或build议更多的疑难解答？的jsfiddle：示例： http : //jsfiddle.net/CTYMv/6/ 加载小提琴后查看CPU使用情况，应该是低的。点击“Show Table”，然后点击popup的div内的某个地方（灰色背景）。然后点击“隐藏表” – CPU使用率将显着增加。然后点击其他任何地方（白色背景），CPU将恢复正常。

如何构build与knockout.js单页面的应用程序？: 我主要想知道如何组织像模态窗口和dynamic页面，如configuration文件。 viewModel应该只包含一个configuration文件视图还是包含所有加载的configuration文件？这里这似乎不是很“干净”。 viewModel = { profile: ko.observableArray([ new ProfileViewModel() //… any others loaded ]) , createPostModal: { input: ko.observable() , submit: //do something to submit… } } <div data-bind="foreach: profile"><!– profile html –></div> <div data-bind="with: createPostModal"></div> 这种方式看起来不太一致。有没有人build立了一个单一的页面应用程序与淘汰赛，可以提供一些build议？代码示例将不胜感激。

Knockout.js似乎正在打破我的jQuery事件处理程序，多么粗鲁: 好吧，我一直试图解开这个混乱几个小时，并且无处可逃，类似于追逐尾巴的狗。这是情况。我为我的UI使用Knockout.js，它本身很好用。但是，我试图使用一些第三方代码，使下拉菜单和checkbox看起来都很漂亮。其实我甚至不确定这是第三方库还是我们的devise师写的。这段代码隐藏了真正的checkbox，并用一个假的<span />替代它，通过CSS来模仿一个checkbox。跨度的click事件触发真实checkbox的change事件： // this code updates the fake UI this._changeEvent = function() { self.isChecked = self.$input.is(':checked'); self._updateHTML(false, true); jQuery(self).trigger('change'); }; // when the user clicks the fake checkbox, we trigger change on the real checkbox this.$fake.on('click', function(e) { e.preventDefault(); self.$input.click().trigger('change'); }); // Bind _changeEvent to the real checkbox this.$input.change(this._changeEvent); […]

通过css绑定，knockout.js结合dynamic和静态类: 在knockout.js中，我们可以使用静态类的css绑定 <div data-bind="css: {'translucent ': number() < 10}">static dynamic css classes</div> 和dynamic <div data-bind="css: color">static dynamic css classes</div> 我已经尝试http://jsfiddle.net/tT9PK/1/结合它的东西 css: {color, translucent: number() < 10} 同时获得dynamic类color和静态translucent ，但我得到一个错误。有没有办法做到这一点？

整合jquery ui对话框与knockoutjs: 我正在尝试为jQuery UI对话框创buildknockoutjs绑定，并且无法打开对话框。对话元素创build正确，但似乎有display: none调用dialog('open')不会删除。此外，调用dialog('isOpen')返回对话框对象而不是布尔值。我正在使用最新的knockoutjs和jquery 1.4.4 jquery ui 1.8.7。我也用jQuery 1.7.1尝试过，结果相同。这是我的HTML： <h1 class="header" data-bind="text: label"></h1> <div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test'}">foo dialog</div> <div> <button id="openbutton" data-bind="dialogcmd: {id: 'dialog'}" >Open</button> <button id="openbutton" data-bind="dialogcmd: {id: 'dialog', cmd: 'close'}" >Close</button> </div> 这是javascript： var jQueryWidget = function(element, valueAccessor, name, constructor) { var options = ko.utils.unwrapObservable(valueAccessor()); […]

Knockout.js – foreach绑定 – testing是否最后一个元素: 我正在使用以下模板： <div class="datatypeOptions" data-bind="if: $data.datatypeTemplate().allowOptions"> <h3>Allowed responses</h3> <p data-bind="if: $data.datatypeTemplate().datatypeOptions().length == 0">There are no responses for this question, yet. <a href="#" data-bind="click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}">Add one</a> <ul data-bind="foreach: $data.datatypeTemplate().datatypeOptions()"> <li> <a href="#" data-bind="text: name, click: $root.selectedDatatypeOption, visible: $data !== $root.selectedDatatypeOption()"></a> <input data-bind="value: name, visibleAndSelect: $data === $root.selectedDatatypeOption(), event: { blur: $root.clearDatatypeOption }, executeOnEnter: { callback: function(){ […]

使用$ index绑定的备用行样式: 我无法获得一个替代行的CSS类应用于具有foreach绑定上下文的挖空模板。我正在使用可用的$index上下文variablesknockout 2.1。这是令人困惑的：我的模板 <li class="row" data-bind="css: { alt: $index%2 }"></li> 导致没有应用alt类，但是： <li class="row" data-bind="text: $index"></li> 正常工作并显示行号。

如何清除从先前访问到视图的observableArray的内容: 我有一个单页面应用程序使用淘汰赛的数据绑定。我的单页面应用程序中的CAApproval.html视图在viewmodel代码中有一个名为AllCertificates的可见arrays。它在页面上填充很好。当您通过单击navigation.html部分中的链接导航离开视图，然后返回到CAApproval页面时，来自previouse访问的值仍位于AllCertificates的observableArray中，因此显示在CAApproval视图中。每当用户返回到使用该可观察数组的CAApproval页面时，我需要清除AllCertificates的observablearray的内容，以便如果用户离开页面并返回，则observablearray的内容为空，因此不会显示数据屏幕。这里是我的viewmodel代码的亮点 – define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService','controls/Lucas'], function(logger, system, router, CertificateDataService) { var allCertificates = ko.observableArray([]); var activate = function () { // go get local data, if we have it return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums(); }; var vm = { activate: activate, allCertificates: allCertificates, SelectAllCerts: SelectAllCerts }); return vm; function SelectAllCerts() […]

当源为空/未定义时，KnockoutJS绑定: 有没有更简洁的方法来做null / undefinedtesting？ <select data-bind="options: SelectedBusinessLine() ? SelectedBusinessLine().Clusters() : [], optionsText: 'Title', value: SelectedCluster, optionsCaption: 'Select Cluster..'"> </select> 代替 data-bind="options: SelectedBusinessLine() ? SelectedBusinessLine().Clusters() : [], 我想要 data-bind="options: SelectedBusinessLine().Clusters(), 给或拿（（）或者至less一个简单的空操作符检查'??' SelectedBusinessLine？ [] 或者一个绑定参数来自动检查是否为空或者无提示失败。任何想法，如果这是可能的？