एम्बर.जेएस + हैंडलबार्स कस्टम सहायक

Question

मैं हैंडलबार्स में एक साधारण सशर्त बयान लागू करने की कोशिश कर रहा हूं जो मेरे नियंत्रक में एक विशेषता के आधार पर परिवर्तन करता है।

मैं साथ आने में कामयाब रहा हूं;

Handlebars.registerHelper("businessVerificationState", function(state, block) { 
    var value = Ember.getPath(this, "state"); 
    if (value == state) { 
    return block(this); 
    } 
}); 

App.businessController.business एक मॉडल वस्तु मैं बना लिया है और "राज्य" को संदर्भित करता है एक विशेषता है। नीचे टेम्पलेट है।

<script type="text/x-handlebars"> 
    {{#with App.businessController.business}} 
    {{#exampleState "test1"}} 
     <p>Test 1</p> 
    {{/exampleState}} 

    {{#exampleState "test2"}} 
     <p>Test 2</p> 
    {{/exampleState}} 
</script> 

यह सब काम सूख जाता है। सिवाय जब मेरा मॉडल बदलता है। वेबकिट में कंसोल से .. यदि मैं टाइप करता हूं ..

business.set ("state", "test2"); उदाहरण के लिए - कुछ भी नहीं बदलता है।

यदि मैं अन्य मानक हैंडलबार कथन जैसे IF या UNLESS का उपयोग करता हूं - जब मैं मॉडल विशेषताओं को अपडेट करता हूं तो सामग्री बदलती है।

स्पष्ट रूप से मैं कुछ अविश्वसनीय रूप से गलत कर रहा हूं और किसी भी मदद की सराहना करता हूं।

Answer 1

ऐसा करने का सबसे आसान तरीका यह है कि एक मूल दृश्य होना चाहिए जिसमें संपत्ति नियंत्रक मूल्य और बच्चे के विचारों से जुड़ी संपत्ति हो, जिनके पास संपत्ति के रूप में निर्दिष्ट राज्य नाम हैं। इसके बाद आप एक isVisible गणना की गई संपत्ति को परिभाषित कर सकते हैं जो कि बच्चे के दृश्य की दृश्यता को स्वचालित रूप से टॉगल कर देगी, इस पर निर्भर करता है कि यह मूल दृश्य में वर्तमान मूल्य से मेल खाता है या नहीं।

आपका टेम्पलेट दिखाई दे सकता है जैसे:

<script type="text/x-handlebars"> 
    {{#view Ember.View currentStateBinding="App.businessController.business.state"}} 
    {{#view App.StateView stateName="test1"}} 
     <p>Test 1</p> 
    {{/view}} 

    {{#view App.StateView stateName="test2"}} 
     <p>Test 2</p> 
    {{/view}} 
    {{/view}} 
</script> 

और अपने जे एस कोड:

var App = Ember.Application.create(); 

App.businessController = Ember.Object.create({ 
    business: Ember.Object.create({ 
     state: 'test1' 
    }) 
}); 

App.StateView = Ember.View.extend({ 
    isVisible: function() { 
     return this.get('stateName') === this.getPath('parentView.currentState'); 
    }.property('parentView.currentState') 
}); 

यहाँ एक काम कर jsFiddle उदाहरण है: http://jsfiddle.net/ebryn/QAxPU/