Прекратить привязку дочернего div, чтобы связать его с другой моделью - PullRequest
Новая
       16

Прекратить привязку дочернего div, чтобы связать его с другой моделью

0 голосов
/ 09 мая 2018

Это мой взгляд: 

@model Horeko.Web.ViewModels.MyUpdateViewModel
<div id="main">
    <div>
          more nested divs with data bindings
          <div id="importDiv" data-bind="stopBinding: true">@Html.Partial("MyPartialView", Model.ImportSettings)</div>
    </div>
</div>

Код в js выглядит так: 

var myInfoModel = function (model) {
        var self = this;

        var mapping = {
            'include': ["desc", "name", "start", "end", "importSettings"],
            'copy': ["id"]
        };
        ko.mapping.fromJS(model, mapping, self);
}

var infoModel = new myInfoModel(model);//model is from the view

var infoPanel = $("main")[0];
ko.applyBindings(infoModel, infoPanel);
ko.cleanNode(infoModel.importSettings, $("#importDiv")[0]);
ko.applyBindings(infoModel.importSettings, $("#importDiv")[0]);

Я бы хотел исключить importDiv из привязки здесь и связать его с другим infoModel.importSettings. Сделайте то же самое, что и я для «основного» div выше, но для «import» div. Однако я не могу этого сделать, потому что я получаю сообщение об ошибке «Невозможно несколько раз применить привязки к одному и тому же элементу».

1 Ответ

0 голосов
/ 09 мая 2018

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

Чтобы обойти это, вы можете избавиться от второго «applyBindings» и использовать привязку «if» с наблюдаемым логическим значением, чтобы сообщить своим привязкам, когда вместо этого следует визуализировать внутренний div. 

var myInfoModel = function () {
    var self = this;
    self.ready = ko.observable(false);
    setTimeout(function(){
    		self.info = 'Inner Bindings';
    		self.ready(true);
    }, 1000);    
}

var infoModel = new myInfoModel();//model is from the view
var infoPanel = $("#main")[0];
ko.applyBindings(infoModel, infoPanel);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="main">
    <div>
        <span>Outer Binding</span>
        
        <div data-bind="if: ready">
            <div id="importDiv">
                <span data-bind="text: info"></span>
            </div>
        </div>
    </div>
</div>

Если это не работает для вашего сценария, вы можете поочередно удалить внутренний div из DOM перед вызовом applyBindings, а затем повторно присоединить его, как только будете готовы связать его. 

var myInfoModel = function () {
    var self = this;
    self.importSettings = { info: 'Inner Bindings' };
}

var infoModel = new myInfoModel();//model is from the view
var infoPanel = $("#main")[0];
var $importPanel = $("#importDiv").detach();
ko.applyBindings(infoModel, infoPanel);

setTimeout(function(){
    $importPanel.appendTo("#main");
    ko.applyBindings(infoModel.importSettings, $("#importDiv")[0]);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="main">
    <div>
        <span>Outer Binding</span>
        
        <div id="importDiv">
            <span data-bind="text: info"></span>
        </div>
    </div>
</div>
...