KnockoutJS：注入模板（组件）applyBindings后

比方说，有一个简单的HTML模板：KnockoutJS：注入模板（组件）applyBindings后

<div> 
    <content-a></content-a> 
    <content-b></content-b> 
</div>

我注册使用（用于分量“内容为”例子）这两个组件：

ko.components.register('content-a', { 
    viewModel: { instance: vm }, // ViewModel for that component 
    template: template // template of that component 
});

再后来我注入HTML模板到指定的HTML元素：

var node = document.getElementById('content'); 
node.innerHTML = template; // here "template" represent just a HTML string (described at the very top) 
ko.applyBindings(vm, node); // here vm represents ViewModel instance

但是，我应用绑定时会呈现所有注册的组件。

有没有办法按需渲染组件？不适用于applyBindings应用。

换句话说：我想渲染主要内容，applyBindings，然后再按需求添加和渲染新组件。

来源

2014-10-08 Cezary Tomczyk

默认情况下，会显示所有添加到DOM的组件。如果你想隐藏起来，直到满足特定条件时，你可以这样做这样的 -

yourView.html -

<section class="sales" data-bind="visible: isRendered"> 
    <div data-bind="text: sales"></div> 
</section>

yourViewModel.js -

define([], function() { 
    return { 
    isRendered: ko.observable(false), 
    sales: ko.observable() 
    } 
});

组件注册 -

ko.components.register('yourComponent', { 
    viewModel: { require: 'files/yourViewModel' }, 
    template: { require: 'text!files/yourView.html' } 
});

然后你可以改变你的组件的值isRendered observ能够使它显示 -

vm.isRendered(true);

当然，这一切都是伪代码，但如果你对你正在尝试做了一个工作拨弄我可以帮助解释更多的在那里。我上面的代码显示了如何使用模块加载器构建组件，但希望它有意义。

来源

2014-10-08 07:49:58

是最后循环，使用“看得见”的结合是一个好主意。这使我朝着正确的方向前进。不过，我正在考虑在需要时向DOM注入模板。在这种情况下，“组件”不会有多大帮助，因为它们在应用绑定后被添加到DOM中。 – 2014-10-08 08:38:28

我偶然发现了这篇文章，因为它描述了类似于我遇到的问题。我们将视图模型绑定到一个特定的元素，因为它可能存在也可能不存在;去绑定组件，我只小猪背过这一点，这是我如何实现这一点：

有一个集合来存储元素，你要介意

var self = this; 
self.modulesToLoad = []; 
self.elements = [];

检查，看是否该元素与存在一个小功能

self.checkIfElementExists = function (element, viewModel) { 
    if (element != undefined) { 
     self.modulesToLoad.push(viewModel); 
     self.elements.push(element); 
    } 
};

声明你的组件

ko.components.register("custom-component", { 
    template: { require: "text!Components/custom-component/custom-component.html" }, 
    viewModel: { require: "Components/custom-component/custom-component" } 
});

加入collecti上检查是否元素存在

self.checkIfElementExists($("custom-component")[0], 
          "Components/custom-component/custom-component"); // A little bit of repetition here, but do you care?

通过收集

for(var i = 0; i < elements.length; i++) { 
    var viewModel = new arguments[i](); 
    var element = elements[i]; 
    ko.applyBindings(viewModel, element); 
}

来源

2015-08-11 13:19:32 Matt

KnockoutJS：注入模板（组件）applyBindings后

回答

相关问题