ko.components.register("toast-container", {
viewModel: ToastViewModel,
template: '<div data-bind="foreach: array1"><div data-bind="text:someText"> </div></div>'
});
function ToastViewModel(params) {
var self = this;
self.array1 = ko.observableArray();
self.Onclick = function () {
self.array1.push({ someText: "some content" });
}
}
$(function () {
ko.applyBindings(new ToastViewModel());
});
当我动态地在array1中推送一些内容时,UI不会更新。 请帮帮我。
答案 0 :(得分:2)
检查一下:
ko.components.register("toast-container", {
viewModel: ToastViewModel,
template: '<div class="array" data-bind="foreach: array1"><div data-bind="text:someText"> </div> </div> <button data-bind="click: Onclick">Click me</button> '
});
function ToastViewModel(params) {
var self = this;
self.array1 = ko.observableArray();
self.Onclick = function () {
//alert("click!");
self.array1.push({ someText: "some content" });
}
}
$(function () {
ko.applyBindings({}, $("#host")[0]);
});
#host {
width: 300px;
height: 300px;
border: 1px solid red;
}
.array {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="host">
<div data-bind="component: { name: 'toast-container'}"></div>
</div>
注意:模型是在组件内部创建的,因此您无需在applyBindings函数调用中创建新模型。
更新1:按钮位于组件外部,组件模型已被拆分。
ko.components.register("toast-container", {
viewModel: ToastContainerViewModel,
template: '<div class="array" data-bind="foreach: array"><div data-bind="text:someText"> </div> </div> '
});
function ToastContainerViewModel(params) {
self.array = params.array;
}
function ToastViewModel(params) {
var self = this;
self.array1 = ko.observableArray();
self.Onclick = function () {
//alert("click!");
self.array1.push({ someText: "some content" });
}
}
$(function () {
ko.applyBindings(new ToastViewModel(), $("#host")[0]);
});
#host {
width: 300px;
height: 300px;
border: 1px solid red;
}
.array {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="host">
<button data-bind="click: Onclick">Click me</button>
<toast-container params="array: array1"></toast-container>
</div>
答案 1 :(得分:0)
看起来onclick永远不会被调用。看看这个小提琴:http://jsfiddle.net/jonr22/w36yuLvr/。
我所做的就是绑定你的onclick事件,以便实际调用它,然后我在数组中添加了一个默认项目,以便点击它,如下所示:
ko.components.register("toast-container", {
viewModel: ToastViewModel,
template: '<div data-bind="click: Onclick, foreach: array1"><div data-bind="text:someText"></div></div>'
});
function ToastViewModel(params) {
var self = this;
self.array1 = ko.observableArray([{someText: 'foo'}]);
self.Onclick = function () {
self.array1.push({ someText: "some content" });
}
}
$(function () {
ko.applyBindings(new ToastViewModel());
});