与MVC收集模型绑定knockoutjs [英] knockoutjs with mvc collection model binding
本文介绍了与MVC收集模型绑定knockoutjs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用knockoutjs渲染项目的集合。允许用户做一些行内编辑后，我需要张贴收集回服务器。然而，集合不会在服务器上，因为我不使用名称=[0] .Blah命名约定填充。有谁知道如何可以呈现name属性像这样使用knockoutjs或如何创建一个模型绑定，让我从ValueProvider？
提取值您可以看到下面的调试过程中ValueProvider的截图。
下面是我的管理视图模型：
公共类FundLevelInvestmentUploadResult
{
公共字符串文件名{获得;组; }
公众的IList＆LT; FundLevelInvestmentViewModel＆GT;项目{搞定;组; }
公众诠释NumberOfErrors {搞定;组; } 公共BOOL ShowErrorsOnly {搞定;组; } 公共FundLevelInvestmentUploadResult（）
{
项目=新的List＆LT; FundLevelInvestmentViewModel＆GT;（）;
}
}
下面是管理类项目：
公共类FundLevelInvestmentViewModel
{
私人字符串_fund;
私人字符串_fundType;
私人字符串_date;
私人字符串_netOfWaivedFees;
私人字符串_waivedFees;
私人字符串_bcip;
私人字符串_fxRate; 公共UINT的rowIndex {搞定;组; } 公众诠释？新政code {搞定;组; }
公共BOOL新政$ C $ {cIsValid获得;组; } 公共字符串基金
{
{返回_fund; }
集合{_fund =的GetString（值）; }
}
公共BOOL FundIsValid {搞定;组; } 公共字符串FundType
{
{返回_fundType; }
集合{_fundType =的GetString（值）; }
}
公共BOOL FundTypeIsValid {搞定;组; } 公共字符串DateOfInvestment
{
{返回_date; }
集合{_date =的GetString（值）; }
}
公共BOOL DateOfInvestmentIsValid {搞定;组; } 公共字符串NetOfWaivedFees
{
{返回_netOfWaivedFees; }
集合{_netOfWaivedFees =的GetString（值）; }
}
公共BOOL NetOfWaivedFeesIsValid {搞定;组; } 公共字符串WaivedFee
{
{返回_waivedFees; }
集合{_waivedFees =的GetString（值）; }
}
公共BOOL WaivedFeeIsValid {搞定;组; } 公共字符串BCIP
{
{返回_bcip; }
集合{_bcip =的GetString（值）; }
}
公共BOOL BCIPIsValid {搞定;组; } 公共字符串ExchangeRateToUSD
{
{返回_fxRate; }
集合{_fxRate =的GetString（值）; }
}
公共BOOL ExchangeRateToUSDIsValid {搞定;组; } 公共字符串文件名{获得;组; } 私人的IList＆LT;串GT; _errors;
公众的IList＆LT;串GT;错误
{
{返回_errors？ （_errors =新的List＆LT;串GT;（））;}
集合{_errors =价值; }
} 公共BOOL显示{搞定;组; } 公共FundLevelInvestmentViewModel（）
{
错误=新的List＆LT;串GT;（）;
展会= TRUE;
} // knockoutjs呼吁ko.mapping.fromJS当空对象返回空，而不是
私人字符串的GetString（字符串值）
{
如果（价值==空）
返回的String.Empty; 返回值;
}
}
下面是我的淘汰赛视图模型：
VAR视图模型= {
的FileData：ko.observableArray（[]）， validateFile：功能（文件，事件）{
$阿贾克斯（{
类型：'后'，
网址：NEWURL，
数据：ko.mapping.toJS（文件）
}）。完成（功能（数据）{
变种NEWFILE = ko.mapping.fromJS（数据）;
变种指数= file.Items.indexOf（文件）;
viewModel.FileData.replace（文件，NEWFILE）;
}）;
}
};
解决方案
如果您使用的版本2.1.0.0或更高版本的淘汰赛，你可以渲染的name属性从可观察到数组如下：
＆LT;输入数据绑定='ATTR：{名字：项目[+ $指数（）+。应对code}'/＆GT;
I'm using knockoutjs to render a collection of items. After allowing the user to do some inline editing I need to post the collection back to the server. However, the collection isn't being populated on the server because I'm not using the name="[0].Blah" naming convention. Does anyone know how to either render name attributes like this using knockoutjs OR how to create a model binder that will allow me to extract the values from the ValueProvider?
You can see a screenshot of the ValueProvider during debugging below.
Here is my managed ViewModel:
public class FundLevelInvestmentUploadResult
{
public string FileName { get; set; }
public IList<FundLevelInvestmentViewModel> Items { get; set; }
public int NumberOfErrors { get; set; }
public bool ShowErrorsOnly { get; set; }
public FundLevelInvestmentUploadResult()
{
Items = new List<FundLevelInvestmentViewModel>();
}
}
Here is the managed class for "Items":
public class FundLevelInvestmentViewModel
{
private string _fund;
private string _fundType;
private string _date;
private string _netOfWaivedFees;
private string _waivedFees;
private string _bcip;
private string _fxRate;
public uint RowIndex { get; set; }
public int? DealCode { get; set; }
public bool DealCodeIsValid { get; set; }
public string Fund
{
get { return _fund; }
set { _fund = GetString(value); }
}
public bool FundIsValid { get; set; }
public string FundType
{
get { return _fundType; }
set { _fundType = GetString(value); }
}
public bool FundTypeIsValid { get; set; }
public string DateOfInvestment
{
get { return _date; }
set { _date = GetString(value); }
}
public bool DateOfInvestmentIsValid { get; set; }
public string NetOfWaivedFees
{
get { return _netOfWaivedFees; }
set { _netOfWaivedFees = GetString(value); }
}
public bool NetOfWaivedFeesIsValid { get; set; }
public string WaivedFee
{
get { return _waivedFees; }
set { _waivedFees = GetString(value); }
}
public bool WaivedFeeIsValid { get; set; }
public string BCIP
{
get { return _bcip; }
set { _bcip = GetString(value); }
}
public bool BCIPIsValid { get; set; }
public string ExchangeRateToUSD
{
get { return _fxRate; }
set { _fxRate = GetString(value); }
}
public bool ExchangeRateToUSDIsValid { get; set; }
public string FileName { get; set; }
private IList<string> _errors;
public IList<string> Errors
{
get { return _errors ?? (_errors = new List<string>());}
set { _errors = value; }
}
public bool Show { get; set; }
public FundLevelInvestmentViewModel()
{
Errors = new List<string>();
Show = true;
}
// knockoutjs is returning "null" instead of "" for a null object when calling ko.mapping.fromJS
private string GetString(string value)
{
if (value == "null")
return string.Empty;
return value;
}
}
Here is my knockout viewModel:
var viewModel = {
FileData: ko.observableArray([]),
validateFile: function (file, event) {
$.ajax({
type: 'post',
url: newUrl,
data: ko.mapping.toJS(file)
}).done(function (data) {
var newFile = ko.mapping.fromJS(data);
var index = file.Items.indexOf(file);
viewModel.FileData.replace(file, newFile);
});
}
};
解决方案
If you are using version 2.1.0.0 or later of knockout you can render the name attribute as follows from an observable array.
<input data-bind='attr: { name: "Items["+$index()+"].DealCode"}' />
这篇关于与MVC收集模型绑定knockoutjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://i.imgur.com/zSU5Z.png](\"http://i.imgur.com/zSU5Z.png\"){kind=link}
