Смешивание нокаутных и бритвенных переменных

Question

Я борюсь с тем, что, как я думаю, является действительно глупой проблемой. Я выполняю итерацию через коллекцию в Knockout.JS, используя «foreach», и вам нужно создать ссылку для каждого элемента, используя переменные в коллекции.

Проблема в том, что мой url генерируется «на лету» с использованием переменных из модели представления, и мне нужно объединить их с переменными в коллекции Knockout.

Вот мой блок, содержащий цикл нокаута.

<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> 

В идеале я хочу, чтобы добавить ссылку на родительском DIV с помощью метода «OnClick =" window.location =». Я попытался с помощью 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> 

Но это дает «Объект не инстанцированный ошибку» Во-вторых, я попытался с помощью нокаут первых, через «данных-затруднительное =" Attr:». метод, как это;

<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> 

Снова нет кубиков.

Я знаю, что это смешивает парадигмы на стороне клиента и на стороне сервера, но не может думать о другом способе без прерывания нокаута.

Есть ли у кого-нибудь опыт с этим?

Answer 1

В будущем это действительно поможет, если вы создадите JSFiddle своей проблемы.

Ваш второй подход ближе.

Вот пример, который использует пользовательские привязки Knockout и шаблон:

http://jsfiddle.net/szWBv/5/

Вы можете использовать бритву, чтобы установить значения на стороне сервера, прежде чем отправить JavaScript клиенту.

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); 

скрипку пример зависит от JQuery и выбивания.