San*_*ram 4 components properties ember.js
我在模板中声明了一个emberjs组件:
<script type="text/x-handlebars" id="components/custom-component">
<h4>The name of the object passed is : {{object.name}}</h4>
{{#if show_details}}
<p>The details of the object passed are : {{object.details}}</p>
{{/if}}
</script>
Run Code Online (Sandbox Code Playgroud)
现在我在我的html模板中使用这个组件:
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each object in model}}
<li>{{custom-component object=object}}</li>
{{/each}}
</ul>
</script>
Run Code Online (Sandbox Code Playgroud)
我的自定义组件的组件类如下所示:
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
// return true or false based on the OBJECT's property (e.g. "true" if object.type is 'AUTHORIZED')
},
});
Run Code Online (Sandbox Code Playgroud)
更新
我实现它的方式如下:
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
var object = this.get('object');
if (object.type == "AUTHORIZED")
return true;
else
return false;
}
});
Run Code Online (Sandbox Code Playgroud)
传递给组件类的参数可以使用它的get方法.
它应该这样工作:
{{custom-component object_name=object}}
Run Code Online (Sandbox Code Playgroud)
(你刚才使用了错误的属性名称).
如果object是对象名称,这应该有效.如果name是object当时使用的属性object.name.
UPDATE
这应该是直截了当的.show_details应根据以下内容定义为计算属性object type:
App.CustomComponentComponent = Ember.Component.extend({
object: null,
show_details: function() {
var object = this.get('object');
if (object.get('type') === "AUTHORIZED")
return true;
else
return false;
}.property('object.type')
});
Run Code Online (Sandbox Code Playgroud)
或者更简单:
App.CustomComponentComponent = Ember.Component.extend({
show_details: function() {
return this.get('object').get('type') === "AUTHORIZED";
}.property('object.type')
});
Run Code Online (Sandbox Code Playgroud)
get访问Ember对象的属性时不要忘记使用.
| 归档时间: |
|
| 查看次数: |
8777 次 |
| 最近记录: |