Unbind просмотреть модель из представления в нокауте

Я ищу unbind функциональность в нокауте. К сожалению, googling и просматривая вопросы, заданные здесь, не дали мне никакой полезной информации по этой теме.

Я приведу пример, иллюстрирующий, какие функции необходимы.

Допустим, у меня есть форма с несколькими входами. Также у меня есть модель представления, привязанная к этой форме. По какой-то причине в качестве реакции на действие пользователя мне нужно отвязать мою модель взгляда от формы, то есть, поскольку действие выполнено, я хочу, чтобы все мои наблюдаемые перестали реагировать на изменения соответствующих значений и наоборот - любые изменения, сделанные для наблюдаемых, t влияет на значения входов.

Каков наилучший способ достичь этого?

Ответы

Ответ 1

Вы можете использовать ko.cleanNode, чтобы удалить привязки. Вы можете применить это к конкретным элементам DOM или контейнерам DOM более высокого уровня (например, всей форме).

См. http://jsfiddle.net/KRyXR/157/ для примера.

Ответ 2

Ответ на

@Mark Robinson правильный.

Тем не менее, используя ответ "Марк", я сделал следующее, которое вы можете найти полезным.

  // get the DOM element
  var element = $('div.searchRestults')[0];
  //call clean node, kind of unbind
  ko.cleanNode(element);
  //apply the binding again
  ko.applyBindings(searchResultViewModel, element);

Ответ 3

<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.js"></script>
        <script type="text/javascript" src="knockout-2.2.1.debug.js"></script>
        <script type="text/javascript" src="clickHandler.js"></script>
    </head>
    <body>
        <div class="modelBody">
            <div class = 'modelData'>
                <span class="nameField" data-bind="text: name"></span>
                <span class="idField" data-bind="text: id"></span>
                <span class="lengthField" data-bind="text: length"></span>
            </div>
            <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button>
            <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button>
            <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button>
        </div>
    </body>
</html>