有没有办法将模板和视图模型完全分开？
有没有办法将模板和视图模型完全分开？
提问于 2015-10-14 20:48:36
我正在寻找的是有一种方式来实现模板，其中模板只知道一个视图模型的接口。
假设我有一个名为Greetings的视图。它知道它可以与一个名为IGreetingsVM的接口通信。
IGreetingsVM可能如下所示：
interface IGreetingsVM {
greetings: KnockoutObservable<string>;
}在实际的视图模型中，我实现了接口：
class GreetingsVMImpl implements IGreetingsVM {
greetings: KnockoutObservable<string>;
constructor() {
this.greetings("Hello world");
}
}因为模板知道它得到了一个IGreetingsVM，所以它也知道它可以调用问候语，所以：
<p data-bind="text: greetings"></p>这样，我就可以将整个视图从实际的视图模型实现中分离出来。
然而，在我见过的大多数例子中，他们通常说这个模板必须有这个视图模型实现。
这可以在示例Java中实现，在示例Java中，您为创建的每个表单都有一个代码隐藏文件，其中您可以为视图模型提供一个get和set方法。
示例：
public class Greeter extends JPanel {
public static final string PROP_VIEWMODEL = "viewModel";
private IGreetingsVM viewModel;
private JLabel greetingLabel;
private BindingGroup bindingGroup;
public Greeter() {
initComponents();
}
public void setViewModel(IGreetingsVM viewModel) {
IGreetingsVM oldViewModel = this.viewModel;
this.viewModel = viewModel;
propertyChangeSupport.firePropertyChange(PROP_VIEWMODEL, oldViewModel, viewModel);
}
public IGreetingsVM getViewModel() {
return this.viewModel;
}
private void initComponents() {
bindingGroup = new BindingGroup();
greetingLabel = new JLabel();
Binding binding = Bindings.createAutoBinding(
AutoBinding.UpdateStrategy.READ_WRITE,
this,
ELProperty.create("${viewModel.greetings}"),
greetingLabel,
BeanProperty.create("text"));
// similar to knockout where bindings auto update components.
bindingGroup.addBinding(binding);
}
}有没有办法在javascript中实现^，最好是用knockout？
Stack Overflow用户
发布于 2015-10-14 20:54:03
JavaScript比Java宽松得多，没有也不需要接口的概念。(出于设计目的，我们可能需要这个概念，我只是说语言不需要。)您只需提供一个具有必要属性的对象。
因此，在使用KO的客户端JavaScript中，您所要做的就是确保您为KO提供的viewModel具有greetings属性，理想情况下是作为一个可观察对象：
// Three different VMs
var vm1 = {
greetings: ko.observable("Hello from #1")
};
var vm2 = {
greetings: ko.observable("Hello from #2"),
someOtherThing: ko.observable("Something else")
};
var vm3 = {
greetings: ko.observable("Hello from #3"),
different: ko.observable("And now for something completely different")
};
// Note how neither KO nor JavaScript cares that the models are different:
ko.applyBindings(vm1, document.getElementById("ex1"));
ko.applyBindings(vm2, document.getElementById("ex2"));
ko.applyBindings(vm3, document.getElementById("ex3"));<!-- Three "instances" of your template: -->
<div id="ex1">
<span data-bind="text: greetings"></span>
</div>
<div id="ex2">
<span data-bind="text: greetings"></span>
</div>
<div id="ex3">
<span data-bind="text: greetings"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33125774
复制相关文章
相似问题
腾讯云开发者
