我正在努力解决我想象中的一个非常愚蠢的问题。我正在使用“foreach”遍历 Knockout.JS 中的一个集合,并且需要使用集合中的变量为每个项目创建一个链接。
问题是我的 url 是使用 View 模型中的变量动态生成的,我需要将这些与 Knockout 集合中的变量结合起来。
这是我的包含 Knockout 循环的 block 。
<div data-bind="foreach: pagedList" class="span8" style="border-bottom: 1px solid #0094ff;">
<div style="cursor: pointer;">
<p data-bind="text: hotelId"></p>
<p data-bind="text: name"></p>
<p data-bind="text: hotelRating"></p>
<p data-bind="text: propertyCategory"></p>
</div>
</div>
理想情况下,我想通过 'onclick="window.location=' 方法将链接添加到父 div。我已经尝试使用 Action.Link 并通过字符串连接添加 Knockout 变量,如此;
<div style="cursor: pointer;" onclick="window.location="@Url.Action( "Index", "Hotel", new { regionId = Model.region.regionId, regionName = HttpUtility.UrlPathEncode(Model.region.regionNameLong.ToString().Replace(",","")).Replace("%20","-"), hotelId = " + hotelID() + ", hotelName = HttpUtility.UrlPathEncode(Convert.ToString(" + name() + ").Replace(",","")).Replace("%20","-") })"> </div>
但这给出了“对象未实例化错误”。其次,我首先尝试通过 'data-bind="attr:' 方法使用 Knockout;
<a href="someurl" data-bind="attr: { href: '/Region/' + '@Model.region.regionId ' + '/' + '@HttpUtility.UrlPathEncode(Model.region.regionNameLong.ToString().Replace(",","")).Replace("%20","-") ' + '/' + hotelID() + '/' + '@HttpUtility.UrlPathEncode(Convert.ToString(" + name() + ").Replace(",","")).Replace("%20","-")' }, text: hotelId()"></a>
再次没有骰子。
我知道这是混合了客户端和服务器端范例,但如果不放弃 Knockout,我想不出其他方法。
有人有这方面的经验吗?
最佳答案
在未来,如果您为您的问题创建一个 JSFiddle,它将真正有帮助。
您的第二种方法更接近。
这是一个使用自定义 Knockout 绑定(bind)和模板的示例:
在将 JavaScript 发送到客户端之前,您可以使用 razor 在服务器端设置值。
HTML 是:
<div data-bind="template: { foreach: myItems, name: 'template-item' }" class="span8" style="border-bottom: 1px solid #0094ff;"></div>
<!-- basic template -->
<script type="text/html" id="template-item">
<p data-bind="text: hotelId"></p>
<p data-bind="text: hotelName"></p>
<p data-bind="text: hotelRating"></p>
<p data-bind="text: propertyCategory"></p>
<a data-bind="KoYourCustomBind: $data" href="#">link</a>
</script>
而 JavaScript 是:
// sample viewModel
var testViewModel = function(){
var self = this;
// another viewmodel property you want to use in url creation.
this.urlPart = "/ALLUSE/";
// array or list is called myItems
var iData = [new myItem("999", "Sheraton", "CAT7"), new myItem("007", "Marriott", "CAT11"), new myItem("212", "Budget Inn", "CAT00")];
this.myItems = ko.observableArray(iData);
}
var myItem = function(sHotelId, sName, sPropertyCategory) {
var self = this;
this.hotelId = sHotelId;
this.hotelName = sName;
this.hotelRating = 4; //hardcoded. only 4 star hotels here :)
this.propertyCategory = sPropertyCategory;
};
// ko bindings
ko.bindingHandlers.KoYourCustomBind = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
var item = valueAccessor();
var url = 'http://' + bindingContext.$parent.urlPart + item.hotelId + item.propertyCategory;
$(element).text(item.hotelName);
$(element).attr('href', url);
}
};
var vm = new testViewModel();
ko.applyBindings(vm);
fiddle 示例依赖于 jQuery 和 Knockout。
关于c# - 混合 knockout 和 Razor 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18726393/