由于某种原因,我无法将对象传递给可观察数组.
function CalendarViewModel() {
var self = this;
self.event = {
name : ko.observable(""),
adress : ko.observable(""),
startTime : ko.observable(""),
endTime : ko.observable("")
}
self.events = ko.observableArray([
])
self.addEvent = function (event) {
self.events.push(event);
alert(self.events.length)
alert(self.events[0].name());
}
我的看法:
<fieldset class="add-event-fieldset">
<div data-bind="with: event">
<legend>Add Event</legend>
<div style="text-align: center;">
<label class="title-label">What </label>
</div>
<div>
<label>Name: </label>
<input type="text" name="whatTxtBox" data-bind="value: name" />
</div>
<div>
<label>Where: </label>
<input type="text" name="whereTxtBox" data-bind="value: adress" />
</div>
<div style="text-align: center;">
<label class="title-label">When </label>
</div>
<div> …在我的viewmodel中,我有一个knockoutjs ObserableArray.在我初始化ViewModel之后,它成功地绑定了数据.然后,我需要做的是对集合进行排序.
$.each(vm.searchResults(), function (i, property) {
console.log(property.Name());
});
vm.searchResults().sort(function (a, b) {
return a.Name().toLowerCase() > b.Name().toLowerCase() ? 1 : -1;
});
$.each(vm.searchResults(), function (i, property) {
console.log(property.Name());
});
如您所见,我将元素的名称输出到控制台,以查看排序前后的顺序.排序工作得很好.问题在于UI更新.不知何故,UI未更新.
然后,尝试使用以下代码从数组中删除记录,以查看UI是否将响应:
vm.searchResults().shift();
用户界面保持不变,不再次更新.这会是什么问题？
编辑:
以下是一个示例案例:http://jsfiddle.net/tugberk/KLpwP/
同样的问题也在这里.
编辑:
我解决了这个问题所示的问题:http://jsfiddle.net/tugberk/KLpwP/16/但我仍然不确定为什么它起作用,因为我最初尝试过.
我有一个Knockout可观察数组,它拒绝更新.sort()调用后绑定的UI(一个jquery Accordion),但是在调用之后很高兴地更新了用户界面.reverse()- 我几天来一直在反对这个问题 - 可以'似乎找到答案......帮助!
容器视图模型 - 实现observableArray属性:
function DataTextsKOViewModel( jsonTexts ) {
var self = this;
// Texts array
self.texts = ko.observableArray();
// Build from json data array
for (var i = 0; i < jsonTexts.AuthorityTexts.length; i++) {
var jsontext = jsonTexts.AuthorityTexts[i];
// Push Text VModel objects onto the KO observable array list ..
self.texts.push(
new DataTextKOViewModel( jsontext )
);
}
}
数组对象模型 - 这些是排序的对象:
// Single data text view model
function DataTextKOViewModel(jsonText) {
// …我试图将服务器中的元素添加到knockout中的可观察数组中.
这是我的ViewModel:
function ArticlesViewModel() {
var self = this;
this.listOfReports = ko.observableArray([]);
self.loadReports = function() {
$.get('/router.php', {type: 'getReports'}, function(data){
for (var i = 0, len = data.length; i < len; i++){
self.listOfReports.push(data[i]);
}
}, 'json');
};
self.loadReports();
};
而且效果很好.但我知道我可以使用concat()在javascript中合并两个数组,据我所知,concat在knockout中工作.因此,当我尝试用self.listOfReports().concat(data);或替换我的for循环时self.listOfReports.concat(data);,屏幕上没有任何内容.
在第一种情况下没有错误,在第二个错误告诉我没有方法concat.
那么如何在没有循环的情况下连接数据.而且我很高兴听到为什么我的方法不起作用
我目前正在使用KnockOut JS并且我进行了一些研究,关于何时通知observable它会触发一个像这样的函数
function FunctionToSubscribe()
{
}
var TestObservable = ko.observableArray([]);
TestObservable.subscribe(FunctionToSubscribe);
我订阅FunctionToSubscribe了这个活动
我目前在想是否有办法取消订阅？就像我们在c#中做的那样？当取消订阅事件时,任何人都对此有所了解???
我正在使用knockoutjs创建一个分区的树视图.每个节点旁边将有三个按钮:1)新子节点(适用于它旁边的节点2)删除(这将删除它旁边的节点,以及3)复制,复制节点及其所有子节点并创建新节点父节点下的节点.
我已经按下了New按钮,现在我正在处理删除按钮.我似乎无法让它工作,而不是做任何有用的事情只是刷新整个页面.这是代码:
视图:
<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(){ …我有一个html表,行形成一个可观察的数组....
<tbody data-bind="foreach: TableArray">
<tr>
<td data-bind:"text: Item1"></td>
等等....
如何跳过第一行...所以我可以在表格顶部添加一个静态行(不是标题).
<tbody data-bind="foreach: TableArray">
<tr>
<td> Static Row </td>
</tr>
<tr>
<td data-bind:"text: Item1"></td>
我如何在特定索引处的knockout数组中插入元素
我知道我们必须使用切片和推送,但最好的方法是什么以及如何在可观察数组中的特定位置插入新元素
我需要从<select>元素中清除选择.我已经读过像Knockoutjs这样的帖子,在组合框中清除了选定的值并尝试了接受的答案,但这些解决方案似乎没有用(不知道Knockout 2中的某些内容是否因为答案被接受而发生了变化？) .
这是一个示例视图模型:
var ClearSelectionViewModel = function () {
var self = this;
self.station = ko.observable();
self.selectedStation = ko.observable();
self.selectedStation.subscribe(function (value) {
self.station(value);
});
self.stations = ko.observableArray(['CLT', 'PHL', 'PHX', 'PIT']);
self.clearSelectedStation = function () {
self.selectedStation(null);
};
};
ko.applyBindings(new ClearSelectionViewModel());?
当clearSelectedStation被调用时,绑定视图模型属性应该设置到null,这应该由绑定的UI反映<select>元素出现空白和扩大的选项没有透露强调项目的列表.但是,我注意到的是,如果您尝试将绑定值property(selectedStation)设置为不在options(stations)数组中的任何内容,则绑定似乎会被忽略.
这个小提琴说明了我在说什么:http://jsfiddle.net/sellmeadog/Su8Zq/1/
如果我不需要,我不想用"空白"值"污染"选项数组.我想知道如何让链接的帖子中的解决方案起作用.
我一直在查看淘汰赛的文档observableArray,我很难弄清楚如何使用数组做一些最基本的事情:通过索引分配一个值.
我试过的事情:(给定oa = ko.observableArray([1,2,3]))
oa(1, 10);oa[1] = 10;oa()[1] = 10;oa.splice(1, 1, 10);最后一个似乎有效,但我担心这.splice()可能效率低下,因为它必须关注转移所有后续值.我更喜欢做简单的基于索引的分配.
我创建了一个显示observableArray很奇怪的jsfiddle.
<ol data-bind="foreach: list">
<li data-bind="text: $data"></li>
</ol>
<script>
var model = {
list: ko.observableArray([3, 5, 7])
};
ko.applyBindings(model);
setTimeout(function() {
model.list()[1] = 55;
model.list.push(99);
model.list()[2] = 77;
}, 2000);
</script>
knockout.js ×10
javascript ×5
arrays ×1
data-binding ×1
html-table ×1
knockout-2.0 ×1
sorting ×1