我正在我的代码库中实现一些组件。但是,我在模板部分遇到了一个较小的问题。我想将模板作为输入发送到 knockout 组件,但我不确定该怎么做,甚至不知道是否可行。
以http://knockoutjs.com/documentation/component-overview.html为例我希望我能做这样的事情:
<like-or-dislike params="value: userRating">
<div class="like-or-dislike" data-bind="visible: !chosenValue()">
<button data-bind="click: like">Like it</button>
<button data-bind="click: dislike">Dislike it</button>
</div>
<div class="result" data-bind="visible: chosenValue">
You <strong data-bind="text: chosenValue"></strong> it.
And this was loaded from an external file.
</div>
</like-or-dislike>
但是我找不到任何文件,如果它有效的话。我想以这种方式实现它的原因仅仅是因为我有一些服务器生成的 html,我希望它仍然是组件的一部分。否则我将不得不使它成为一个 json 对象并在组件内部呈现 html,这似乎是一个不必要的额外步骤。使用组件的好处是逻辑在它自己的文件中是分离的,并且更容易在不同组件之间分离逻辑。我知道如果我这样做的话,如果我想重用该组件,我必须复制 html。
我是不是想错了,或者这可能吗?
感谢您的明智建议和更好的智慧。
最佳答案
我不能说我完全理解你的情况,但我想我可能有答案。您实际上可以让服务器生成 <script type="text/html">
并将其与组件一起使用(当然是通过 id)。 KO 文档在组件模板方面很差,但这里有一个使用元素的示例。
我从组件中学到了一些东西。 View 模型必须在声明之前声明,<script>
必须在绑定(bind)之前位于 dom 中。
function ComponentViewModel() {
var self = this;
self.Title = ko.observable("This is a Component VM");
}
function ViewModel() {
var self = this;
self.ExampleComponent = ko.observable({
name: 'Example'
});
}
ko.components.register('Example', {
template: {
element: 'ComponentTemplate'
},
viewModel: ComponentViewModel
})
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="ComponentTemplate" type="text/html">
<span data-bind="text: Title"></span>
</script>
<div data-bind="component: ExampleComponent"> </div>
我不会贬低组件的值(value),但我也会向您指出使用带有数据绑定(bind)的模板,这本质上是一样的(如果我错了请纠正我)。并且不需要建立组件。这对于潜在组件出现频率较低的情况更好。
function ComponentViewModel() {
var self = this;
self.Title = ko.observable("This is a Template with a VM");
}
function ViewModel() {
var self = this;
self.ComponentVM = ko.observable(new ComponentViewModel());
self.ExampleComponent = ko.observable({
name: 'ExampleTemplate', // This is the ID
data: self.ComponentVM
});
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="ExampleTemplate" type="text/html">
<span data-bind="text: Title"></span>
</script>
<div data-bind="template: ExampleComponent"> </div>
希望这些对您有所帮助!
关于javascript - 使用 html 作为 knockout 组件的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46117728/