Hot Towel - Динамично обвързване на данни на Dom елементи

Днес имах проблем със свързването на данни, използвайки нокаут в API на Hot Towel. Вземете следното за пример...

var vm = {
    item: { entry: 'yes' }
}

return vm

и html

<div data-bind="text: item.entry"></div>

Това обаче работи, когато модифицирам js, за да добавя div динамично

var vm = {
    canActivate: canActivate,
    activate: activate,
    attached: attached,
    item: { entry: 'yes' }
}

return vm

function canActivate(){
     return true;
}

function activate() {
     logger.log(title + ' View Activated', null, title, true);
     return true;
}

function attached() {
     $('#page').append('<div data-bind=\"item.entry\"></div>);
}

Обвързването на данни е неуспешно. Опитах се да използвам ko.cleanNode и след това се опитах да обвържа отново DOM обекта, но получих съобщение за невъзможност за повторно обвързване. Някой измислил ли е решение за динамично добавени DOM обвързвания на данни?


html jquery knockout.js hottowel
person Scott Alexander    schedule 28.04.2014    source източник
comment
Мога ли да попитам защо искате да добавите елемент? Всъщност не трябва да правите много от това, когато използвате нокаут. Вместо това бихте имали списък с елементи и след това трябва да ги изобразите с нокаут вместо вас, като използвате свързване foreach. А за добавяне на нов... тогава просто ще го добавите към списъка с модели на изглед и всичко ще работи и ще се рендира моментално.   -  person 4imble    schedule 28.04.2014
comment
Това е, което гледам в момента, но това е голяма задача по отношение на това, което правя, тъй като оформлението на страницата ми се управлява от база данни.   -  person Scott Alexander    schedule 28.04.2014

Отговори (2)


arrow_upward
0
arrow_downward

Можете да използвате шаблони и метода ko.renderTemplate, за да постигнете това (вижте fiddle).

HTML

<div id="page"></div>

<script type="text/html" id="appendedEntry">
    <div data-bind="text: entry"></div>
</script>

JS

var vm = {
    item: { entry: 'yes' },
    append: appendDiv
};

function appendDiv() {
    ko.renderTemplate('appendedEntry', vm.item, {}, document.getElementById('page'));    
}

ko.applyBindings(vm);

vm.append();

Можете да научите повече за метода ko.renderTemplate (точно какво прави и неговите параметри) в тази статия.

Освен това, въпреки че не съм сигурен дали ще се отнася за вашия конкретен случай, имайте предвид, че Durandal има манипулатори за отложено свързване, които позволяват на вашите нормални манипулатори на KO свързване да взаимодействат с DOM елементи след завършване на композирането на изгледа.

person rwisch45    schedule 28.04.2014

arrow_upward
0
arrow_downward

Ако искате да избегнете ръчното изобразяване на елемента, можете да го направите по следния начин:

http://jsfiddle.net/Akn5T/

<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: entry"> </span>
    </li>
</ul>

<button data-bind="click: add">Add new</button>

function vm() {
    var items = ko.observableArray([
        { entry: 'yes' },
        { entry: 'no' },
        { entry: 'maybe' }
        ]);

    function add(){
        items.push({entry: "new"})
    }

    return {
        items: items,
        add: add
    }
};

ko.applyBindings(vm);

По принцип искате да представите вашата база данни в изгледа и след това да забравите за ръчното й изобразяване, като имате подходящите обвързвания в изгледа, както по-горе.

person 4imble    schedule 28.04.2014