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

Question

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

示例

模板

<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>

<<p> 视图/strong>

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));
        }
    }
});

现在，显然这不起作用，因为模型。文本永远不会在视图中绑定，就像我使用textarea模板帮助器一样:

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

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

我没能在SO或其他任何地方找到关于这个的信息，所以如果有人能帮助我，提前感谢!/.

Answer 1

你漏掉的主要事情之一是将视图绑定到控制器。这实际上是非常直接的，但是没有它Ember不知道它应该在两者之间传播更改。我要做的第一件事是:

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

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

要处理的下一项实际上是在视图中绑定值。你所需要做的就是告诉输入将它的值绑定到视图的值。可以这样做

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

尝试一下，您可以使用我创建的jsbin作为示例:

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

如果你有任何其他问题，请告诉我，但这应该解决你的问题!