2015-02-09 2 views
4

У меня есть модель просмотра ko. Я хочу сделать частичный вид дважды на одной странице. Один раз для физического адреса и один раз для почтового адреса. Они имеют одинаковые свойства, данные просто разные. Нет модели родительского представления нокаута на стороне клиента, которая содержит как физические, так и почтовые адреса. Я получаю сообщение «Вы не можете применять привязки несколько раз к одному и тому же элементу». Выдержка ниже. Я мог бы создать модель нокаута, называемую адресами, которая будет содержать как физическую, так и почтовую, а затем использовать привязку со связыванием в частичном с двумя div (одна для почтовой, одна для физической). Я предполагаю, что это сработает. Но я действительно не хочу создавать родительскую модель, если это необходимо. Все предложения?Применить привязки ko к частичному виду

Страница:

@Html.Partial("_Address", Model.PhysicalAddress) 
@Html.Partial("_Address", Model.PostalAddress) 

Частичное:

@model Models.AddressDetailsViewModel 
<div id="myDiv"> 
     <table class="my-table"> 
       <tr> 
        <td id="postalCode"> 
         <span data-bind="text: props.postalCode"> 
         </span> 
        </td> 
       </tr>    
     </table> 
    </div> 

<script type="text/javascript"> 
    var data = @(Html.Raw(Json.Encode(Model))); 
    var viewModel = mapAddress(data); 
    ko.applyBindings(viewModel, $("#myDiv")[0]); 
</script> 
+0

попробуйте cleanNode (// div) и повторно примените привязки. вы указали, что попробуйте –

+0

Поскольку идентификатор должен быть уникальным, недопустимо иметь одинаковые идентификаторы дважды на той же странице. –

+0

@WayneEllery Если я не устанавливаю явно идентификаторы, которые должны работать? –

ответ

3

Вы можете использовать with связывание в Knockout, чтобы связать части ViewModel с многоразовым частичным видом. Я написал статью в блоге об этом некоторое время назад:

https://conficient.wordpress.com/2013/03/07/knockout-multiple-viewmodels-and-reusable-partial-views/

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

<div data-bind-"with: physicalAddress"> 
    @Html.Partial("_Address") 
</div> 

<div data-bind-"with: postalAddress"> 
    @Html.Partial("_Address") 
</div> 

Это предполагает, что два DIVs находятся в пределах основного ViewModel связывания контекста. Обратите внимание, что если какой-либо адрес не определен или null, адрес HTML не будет виден.

Нокаут-версия 3.2 представила концепцию компонентов, как также отметил @ shailendra-kumar. В долгосрочной перспективе это лучший подход, но частичные взгляды также должны работать.

1

Мое предложение заключается в использовании Нокаут компонентов, который был введен в 3.2.0 версии. http://knockoutjs.com/documentation/component-registration.html

Создайте компонент нокаута и отправьте данные в параметрах один раз для физического адреса и один раз для почтового адреса.

0

Я решил создать родительскую модель нокаута с физическим и почтовым адресом на ней. А потом я применяю привязки на родительской странице так:

<div id="physicalAddress"> 
    @Html.Partial("_Address") 
</div> 

<div id="postalAddress"> 
    @Html.Partial("_Address") 
</div> 

<script type="text/javascript"> 
var data = @(Html.Raw(Json.Encode(Model))); 
var viewModel = mapParentViewModel(data); 
ko.applyBindings(viewModel.viewModels().physicalAddress(), $("#physicalAddress")[0]); 
ko.applyBindings(viewModel.viewModels().postalAddress(), $("#postalAddress")[0]);</script> 
Смежные вопросы