将javascript函数与knockout、viewmodels和dynatree混合匹配
Mixing and matching javascript functions with knockout, viewmodels and dynatree
因此,引用这个jsfiddle:http://jsfiddle.net/Gaa3G/我正在尝试混合使用一些javascript函数来操作具有淘汰视图模型的动态树。正在调用代码,但没有发生任何事情(除了显示调试警报)。
视图(html):
<script id="itemTmpl" type="text/html">
<li>
<span >
<span data-bind="text: name" />
<input type="checkbox" data-bind="checked: isManager" />
</span>
<ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
</li>
</script>
<button data-bind="click: addNodes">Add Nodes</button>
视图模型:(不管怎么说,其中一部分,其余部分可以在jsfiddle上看到)
self.addNodes = function() {
alert("I'm adding a node...");
var rootNode = $("#dynatree").dynatree("getRoot");
var childNode = rootNode.append({
title: "Programatically addded nodes",
tooltip: "This folder and all child nodes were added programmatically.",
isFolder: true
});
childNode.append({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});
};
在我的开发计算机上,我看到了一个错误,上面写着"在初始化之前不能调用dynatree上的方法;试图调用方法‘getRoot’",但在jsfiddle上没有看到这个错误。这可能有关联,也可能没有关联!
那么我是不是错过了什么?这是特定插件(dynatree)的一些神秘问题吗?(我猜不会,因为在谷歌搜索其他与jquery相关的插件时,会出现很多类似的错误消息,这些消息似乎与淘汰自定义绑定处理程序中的"setTimeOut"有关。我不知道为什么setTimeOut在那里,我只是从原始的jsfiddle中复制了它!
编辑1:所以我想到了更新可观察数组——毕竟,这就是树的绑定!
我把这个添加到我的"addNodes"方法中:
var bob = new Person({
id: 3,
name: 'Bob',
isManager: true,
children: []
});
self.persons.push(bob);
瞧,"鲍勃"确实被添加到了树上。
这可能会成为一个问题,因为当树绑定到视图模型时,树似乎仍然认为它没有初始化,这会阻止诸如"getRoot"之类的操作。希望马丁能在某个时候出现,并就此发表意见!
基本上,您在错误的节点上调用.dyntree()。
您在内部UL
元素上有databind="dynatree:{}",而不是在#dynatree
元素上。因此,该UL
是根节点。
以这种方式更新:
self.addNodes = function() {
alert("I'm adding a node...");
// use the correct selector below:
var rootNode = $("#dynatree > ul").dynatree("getRoot");
// call the proper method .addChild instead of .append
var childNode = rootNode.addChild({
title: "Programatically addded nodes",
tooltip: "This folder and all child nodes were added programmatically.",
isFolder: true
});
childNode.addChild({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});
};
更新的演示
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 混合元素的有角度的ng重复
- VueJS多个混合
- 如何对混合格式的数字(89900,1k,1.5k,15.2k)进行排序
- 过滤”;溢价;页面加载选项使用混合
- 将javascript与PHP混合?(跟踪Google Analytics虚拟页面浏览量)
- 在混合基本 URL 下动态加载 require.js 模块
- javascript散列/数组混合性能
- 如何通过ibmworklight中的sql适配器从db2中检索或显示html页面上的数据?android混合应用程序开发
- 如何在 VB 项目中混合使用 Razor 和 Javascript
- 混合类型提前.js和引导 3.
- 混合 Web/客户端框架
- 如何在树枝模板中包含已解释和未解释文本的混合
- 我想在混合移动应用程序中使用Sqlite插件(Cordova)创建一个示例项目
- 在 JavaScript 中与状态混合
- 猫鼬混合模式不起作用
- 将剃刀语法与 JavaScript 混合
- 混合了文字和数组的Javascript数组
- 如何在javascript函数中弹出php(与html标签混合)文件
- 将javascript函数与knockout、viewmodels和dynatree混合匹配