使用视图时访问路由器中的模型数据

时间:2014-08-11 17:40:34

标签: ember.js ember.js-view

我正在寻找一种在使用视图显示模型属性时访问路径中的模型数据的方法。

实施例

模板

<h2>New post</h2>

<form {{action save model on="submit"}}>
    <label>Title</label>
    {{input type="text" value=title placeholder="title" id="title"}}

    <label>Text</label>
    {{view "tinymce" value=text }}

    <button>Post</button>
 </form>

查看模板

<textarea id="tinymce">
</textarea>

查看

export default Ember.View.extend({
    templateName: 'views/tinymce-textarea',

    didInsertElement: function() {
        tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'tinymce');
        tinymce.EditorManager.execCommand('mceAddEditor',true, 'tinymce');
    }
});

路由器

export default Ember.Route.extend({

    ....

    actions : {
        save : function(model) {
            if (!model.get('title').trim() || !model.get('text').trim()) {
                return;
            }

            model.save().then(this.onSuccessfulSave.bind(this), this.onFailedSave.bind(this));
        }
    }
});

现在,显然这不起作用,因为model.text永远不会绑定在视图中,就像我使用textarea模板帮助器一样:

{{textarea value=text placeholder="text" id="text"}}

但这只是我试图让它工作的很多(很多)方法中的一种,而我完全不知道在使用视图时如何访问路径中的模型属性。它对我来说似乎也是一个非常常见的用例。

我未能在SO或其他任何地方找到有关此信息,所以如果有人能够帮助我,请提前感谢! / AS。

1 个答案:

答案 0 :(得分:0)

因此,您遗漏的主要内容之一是将视图绑定到控制器。这实际上是非常直接的,但没有它,Ember不知道它应该在两者之间传播变化。我要做的第一件事是:

 {{view "tinymce" valueBinding="text" }}

这表示视图值将绑定到控制器的文本值。每当更新视图的值时,它将传播到控制器,反之亦然。

要处理的下一个项目实际上是绑定视图中的值。您需要做的就是告诉输入将它的值绑定到视图的值。这可以像这样完成

{{textarea value="view.value" placeholder="text" id="text"}}

试试这个,你可以使用我创建的这个jsbin作为例子:

http://emberjs.jsbin.com/qanudu/26/

如果您有任何其他问题,请告诉我,但这可以解决您的问题!