Asp.net mvc 从另一个局部视图(MVC)将项目添加到viewmodel中的可观察数组
我是一个新手。我正在开发一个MVC应用程序,我想在其中实现knockoutJS,但场景有点不同 我有一个显示列表的页面。我在页面上有3个链接,点击它们,我会相应地向页面添加部分视图。我想做的是,每当我向部分视图添加值/数据时,页面上的列表都应该用knockout更新。换句话说,当我从局部视图保存数据时,我想给可观察数组增加值 请让我知道这是否可行,或者我应该只将其保存在jquery中 代码如下: 主要观点:Asp.net mvc 从另一个局部视图(MVC)将项目添加到viewmodel中的可观察数组,asp.net-mvc,asp.net-mvc-4,knockout.js,Asp.net Mvc,Asp.net Mvc 4,Knockout.js,我是一个新手。我正在开发一个MVC应用程序,我想在其中实现knockoutJS,但场景有点不同 我有一个显示列表的页面。我在页面上有3个链接,点击它们,我会相应地向页面添加部分视图。我想做的是,每当我向部分视图添加值/数据时,页面上的列表都应该用knockout更新。换句话说,当我从局部视图保存数据时,我想给可观察数组增加值 请让我知道这是否可行,或者我应该只将其保存在jquery中 代码如下: 主要观点: <input type="button" value="Add Partial V
<input type="button" value="Add Partial View" onclick="LoadPartial();" />
<div id="dvContent"></div>
<h4>People</h4>
<ul data-bind="foreach: people">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
<a href="#" data-bind="click: $parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script>
function LoadPartial() {
$.ajax({
url: "/home/index",
dataType:"html",
type: "GET",
success: function (data) {
$("#dvContent").html(data);
}
});
}
</script>
<script>
function AppViewModel() {
var self = this;
self.people = ko.observableArray([
{ name: 'Bert' },
{ name: 'Charles' },
{ name: 'Denise' }
]);
self.addPerson = function () {
self.people.push({ name: "New at " + new Date() });
};
self.removePerson = function () {
self.people.remove(this);
}
}
ko.applyBindings(new AppViewModel());
</script>
人
-
职位名称:
添加
函数LoadPartial(){
$.ajax({
url:“/home/index”,
数据类型:“html”,
键入:“获取”,
成功:功能(数据){
$(“#dvContent”).html(数据);
}
});
}
函数AppViewModel(){
var self=这个;
self.people=ko.array([
{name:'Bert'},
{姓名:'查尔斯'},
{name:'Denise'}
]);
self.addPerson=函数(){
self.people.push({name:“+New Date()”的新日期]);
};
self.removePerson=函数(){
自我。人。移除(这个);
}
}
应用绑定(新的AppViewModel());
局部视图:
<table>
<tr>
<td>Add new Row</td>
<td><input type="button" value="Add" data-bind="click: addPerson"/></td>
</tr>
</table>
添加新行
谢谢,
JsHunjan击倒很容易完成。如果你想得到一些帮助,你需要展示一些你已经尝试过的代码。我将发布一个一般性的答案,但它不会准确地修复您的用例,只是基本上- 创建一个对象来保存新项目,可以在父视图模型或子视图模型中执行此操作,但如果在子视图模型中执行此操作,则需要将其传递回父视图 在子视图模型中单击“保存”按钮或“添加”按钮后,只需在您创建的ObservalArray中执行.push()操作即可myObservableArray.push(newItem()) 敲除将识别发生的所有更改,并自动执行所需的操作
希望这能有所帮助。您的逻辑存在的问题是,局部视图无论如何都没有绑定到数据。您是否考虑过将其作为页面的隐藏方面或使用模式,以便可以正确绑定数据,而不是事后实例化未绑定的视图?您能告诉我如何做到这一点吗?我了解您关于隐藏模型的观点。我已经做到了,现在一切都很好。谢谢你的建议。