- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 knockoutjs 创建分区 TreeView 。每个节点旁边将是三个按钮:1)新建子节点(应用于它旁边的节点 2)删除(这将删除它旁边的节点,以及 3)复制,它复制节点及其所有子节点并创建一个新的父级下的节点。
我已经按下了“新建”按钮,现在正在处理删除按钮。我似乎无法让它工作,它没有做任何有用的事情,而是刷新了整个页面。这是代码:
查看:
<h2>Skill & Weight Divisions</h2>
<span data-bind="text: tournamentname"></span><button data-bind="click: addDivision"><img src="new.png"/></button>
<ul data-bind="template: { name: 'divisionTemplate', foreach: divisions }"></ul>
模板:
<script id="divisionTemplate" type="text/html">
<li data-bind="style: {'background-color':color}">
<input data-bind="value: name"/><button data-bind="click: addDivision"><img src="new.png"/></button><button data-bind="click: $parent.removeDivision"><img src="remove.png"/></button><button data-bind="click: $parent.copyDivision"><img src="copy.png"/></button>
<ul data-bind="template: { 'if': children, name: 'divisionTemplate', foreach: children }"></ul>
</li>
</script>
查看模型和适当的辅助函数:
function division(id, name, filter, children) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.filter = ko.observable(filter)
if(children){
this.children = ko.observableArray(children);
}else{
this.children = ko.observableArray();
}
this.addDivision = function(){
this.children.push(new division("", "", ""));
}
this.removeDivision = function(division){
this.children.remove(division);
}
this.copyDivision = function(division){
this.children.push(division);
}
this.color = randColor();
};
function tournamentViewModel(){
var self= this;
self.tournamentname = ko.observable('NO NAME YET');
self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]);
self.district = ko.observable(self.districts()[0]);
self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]);
self.region = ko.observable(self.regions()[0]);
self.location = ko.observable('WHEREVER YOU WANT');
self.eventdate = ko.observable('');
self.startTime = ko.observable('');
self.image = ko.observable();
self.flyer = ko.computed(function(){
var flyerHTML = '<span style="text-align:center;padding:10px;"><h1>'+self.tournamentname()+'</h1><img src="'+self.image()+'"/><br/>';
flyerHTML += 'District: ' + self.district().districtName + ' Region: ' + self.region().regionName+'<br><br>';
flyerHTML += '<h2>WHEN: '+self.eventdate()+' '+self.startTime()+'</h2>';
flyerHTML += '<h2>WHERE: '+self.location()+'</h2>';
flyerHTML += '<img src="http://maps.googleapis.com/maps/api/staticmap?center='+encodeURI(self.location())+'&zoom=12&size=200x200&markers=color:blue%7Clabel:S%7C'+encodeURI(self.location())+'&maptype=roadmap&sensor=false"/>';
return flyerHTML;
}, self);
self.clearImage = function(){
self.image('');
}
self.tournamentID = ko.computed(function(){return 't_'+self.district()+'_'+self.region()+'_'+self.eventdate()}, self);
self.pricingStructures = ko.observableArray([new pricingStructure(3,2.99), new pricingStructure(1,1.99)]);
self.removePricingStructure = function(pricingStructure){
self.pricingStructures.remove(pricingStructure);
}
self.addPricingStructure = function(){
self.pricingStructures.push(new pricingStructure("", ""));
}
self.promoCodes = ko.observableArray();
self.promoTypes = ['%','$'];
self.removePromoCode = function(promoCode){
self.promoCodes.remove(promoCode);
}
self.addPromoCode = function(){
self.promoCodes.push(new promoCode("", ""));
}
self.divisions = ko.observableArray([new division(1, "Men","",[new division(2,"Gi"), new division(3,"No-Gi")])]);
self.addDivision = function(){
self.divisions.push(new division("", "", ""));
}
}
ko.applyBindings(new tournamentViewModel());
我的主要问题是:有没有一种方法可以访问对象的父数组以便从数组中删除该对象?在此先感谢您的帮助!
编辑:这是一个 jsFiddle:http://jsfiddle.net/eqY7Z/但是它似乎在那里根本不起作用。如果你们做不到,我会附上托管它的网站链接,以便您仔细查看。
最佳答案
我采纳了你的想法并做了一个 working fiddle ,其行为完全符合您的描述。对不起,我不想尝试解决你的问题。它有很多与您的问题没有直接关系的东西,而且这个解决方案足够通用,其他人应该能够使用它。如果您需要帮助调整它,请告诉我。
需要注意的一件事是克隆功能。您的复制功能不深,会导致多个节点指向同一个对象。如果您要更新节点值,它将传播到它的克隆。 Knockout 使用 ko.toJS
提供了一个方便的深度复制 + 展开可观察对象。 super 有用。
JS:
var Node = function(name, children) {
var self = this;
self.name = ko.observable(name || 'NewNode');
self.children = ko.observableArray(
ko.utils.arrayMap(children || [], function(i) {
return new Node(i.name, i.children);
}));
self.newChild = function() {
self.children.push(new Node());
};
self.removeNode = function(node) {
self.children.remove(node);
};
self.copyNode = function(node) {
var cloneNode = ko.toJS(node);
self.children.push(new Node(cloneNode.name, cloneNode.children));
};
};
//Example data removed for brevity, see fiddle
ko.applyBindings(new Node(data.name, data.children));
HTML:
<button data-bind="click: newChild">NewNode</button>
<ul data-bind="template: { name: 'treeTemplate', foreach: children}">
</ul>
<script id="treeTemplate" type="text/html">
<li>
<input data-bind="value: name" />
<button data-bind="click: newChild">New Child</button>
<button data-bind="click: $parent.removeNode">Remove Node</button>
<button data-bind="click: $parent.copyNode">Copy Node</button>
<ul data-bind="template: { name: 'treeTemplate', foreach: children}"></ul>
</li>
</script>
关于javascript - 从 knockoutJS 中的 observableArray 中删除自身,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11463970/
我已经使用 knockout js 实现了一个简单的 spa,您可以在其中在多个页面之间导航,每个页面都呈现一个 View 模型。菜单是一个 2 级菜单,因此我有主页面和子页面。我用knockout的
我想使用组件作为表格行模板,但似乎找不到方法,这可能吗? 当我执行以下操作时,它不会将组件放在 tbody 中,而是将其放在表格上方。 组件 模板 最佳答案
我希望能够将单击和双击事件绑定(bind)到一段文本。我知道我可以使用 data-bind ="event: { dblclick: doSomething } 双击,但我还需要能够在单击时执行不同的
我是否可以告诉 knockout 映射插件订阅所有属性更改调用某个函数? 我意识到我可以通过这种方式手动订阅属性更改事件: var viewModel = { name: ko.observa
我想要一个可见或不可见,具体取决于我的 javascript 中的 bool 值。 我的 HTML 是: Remove
我想将此 json 映射到自定义对象。问题是项目不是 typeof Item 对象而是普通对象。我在这里缺少什么? 你可以在这里测试:http://jsfiddle.net/5jhpE/ var js
我有一个 self 描述的定义如下: var my_data = { types: { typeA: {fieldX: { type: "string"}}, typeB:
首先看一下: http://pastebin.com/823NMiWc 这是 Knckoutjs + Jquery Raty 插件 假设这些是数据库中的列: story_rev: ko.observa
我正在使用 knockout.js 并尝试设置我的选择绑定(bind)的默认值(不使用 optionCaption),并在有人更改它时捕获该值。
我目前有一个数字框,用户可以在其中输入数字 1、2 或 3,并在此基础上设置一些条件格式。 但是,我希望数字字段成为一个下拉列表,其中显示“短”、“长”和“非常长”之类的内容,但在幕后,传递的实际值是
我正在寻找一些有关如何创建代表我的评论系统中的帖子的模型的指南。本质上,它是 Facebook 的简化版本,其中有不同用户的帖子,每个帖子都有零个或多个评论。亲子关系始终只有一层。 创建 Post 对
我需要为数组的每个元素计算一个可观察值。此计算可观察量的解析需要依赖于每个数组元素上下文中存在的其他属性。 请检查以下示例案例: 这是 KnockoutJS foreach 绑定(bind)到嵌套数组
我在网格中有一个嵌套的组产品选项数组。我想要一个弹出编辑器,列出每个分组产品选项的所有产品(产品选项行),并允许用户检查它们之间的关系。我遇到过多对多关系的示例,但没有看到 self 引用分组多对多的
我正在使用KnockoutJs构建一个搜索列表,代码如下: HTML: 部分Js搜索功能: this.name = ko.observable(''); this.query = ko
我是 KnockoutJS 新手。我有一个按以下方式工作的应用程序: 加载页面时,复杂的数据结构会传递到前端 该数据结构被分成更小的 block ,这些数据 block 被传递给组件 用户与组件交互以
我有一个 ASP.Net MVC 网站,在 View 中使用 KnockoutJS 和 KOGrid。它动态地呈现某一特定列中的超链接,如下所示: cellTemplate: '' 已决定,单击时,浏
我正在使用javascript和knockoutjs来使用viewmodel实现搜索过滤器。我无法让搜索过滤器工作。下面是我的js文件 //Object Constructor Class for L
我使用 KnockoutJS 来创建工作申请网站,并使用 JS 中的 getJSON 方法。 不幸的是,我得到了这个结构: 办公室 纽约 部门 金融 职位 示例 ... IT 物流 营销 华盛顿 部门
我在这里创建了一个问题示例: http://jsfiddle.net/JustinN/qWeLT/1/ 我的实际代码已连接到 ASP.NET Web 方法,因此示例代码已调整为指向公共(public)
在过去的几天里,我对 Knockoutjs 越来越感兴趣。它看起来非常有前途,因为它对 MVVM 模式和 WPF 进行了类似绑定(bind)的建模,但每当它为非 RIA Web 应用程序带来一些有用的
我是一名优秀的程序员,十分优秀!