ember.js自定義組件或視圖

我試圖爲我的應用程序創建一個可重用的typeahead組件（？）。我正在使用twitter's typeahead JavaScript庫，並試圖創建一個自定義組件/視圖。ember.js自定義組件或視圖

我想能夠定義的預輸入我的模板，像這樣：

{{view App.TypeAhead name=ta_name1 prefretch=prefetch1 template=template1 valueHolder=ta_value1}}

我想這些變量將位於控制器：

App.ApplicationController = Ember.Controller.extend({ 

    ta_name1: 'movies', 

    prefetch1: '../js/stubs/post_1960.json', 

    template1: '<p><strong>{{value}}</strong> - {{year}}</p>', 

    ta_value1: null  
});

我不知道我需要用什麼來實現這個，一個組件或一個視圖。我會想象它會東西這樣。

App.Typeahead = Ember.View.extend({ 
    templateName: 'typeahead', 
    didInsertElement: function() { 

    $('.typeahead').typeahead([{ 
     name: this.getName(), 
     prefetch: this.getPrefetch(), 
     template: this.getTemplate(), 
     engine: Hogan, 
     limit: 10 
    }]); 

    $('.typeahead').on('typeahead:selected', function(datum) { 
     this.set('controllers.current.' + this.getValueHolder()), datum); 
    }); 
    } 
});

有了這樣

<script type="text/x-handlebars" data-template-name='typeahead'> 
    <input class="typeahead" type="text"> 
</script>

我不知道如何從jQuery類選擇離開的模板。事實上，我將在表格上有一個以上的類型，所以這個類別選擇不會削減它。

我也不知道如何從視圖中的控制器獲取值。顯然getPrefetch(),getTemplate(),getValueHolder()等方法不存在。

我知道這是一個僞代碼的TON，但希望我能指出正確的方向。

來源

2013-10-28 David

看看我的Twitter TypeAhead implementation for Ember。

，你可以使用它像這樣：

APP.CardiologistsTypeAhead = Bootstrap.Forms.TypeAhead.extend({ 
    dataset_limit: 10, 
    dataset_valueKey: 'id', 
    dataset_engine: Bootstrap.TypeAhead.HandlebarsEngine.create(), 
    dataset_template: '<strong>{{lastName}} {{firstName}}</strong>', 
    dataset_remote: { 
    url: '%QUERY', 
    override: function (query, done) { 
     $.connection.cardiologists.server.getAllByLastNameLike(query) //SignalR 
     .then(function (cariologists) { 
      done(cariologists); 
     }); 
    } 
    }, 

    didInsertElement: function() { 
    this._super(); 

    var self = this; 
    Em.run.schedule('actions', this, function() { 
     var cardiologistFullName = this.get('controller.content.cardiologistFullName'); 
     self.get('childViews')[1].$().val(cardiologistFullName); 
    }); 
    }, 

    valueChanged: function() { 
    this._super(); 

    this.get('childViews')[1].$().typeahead('setQuery', this.get('controller.content.cardiologistFullName')); 
    }.observes('value'), 

    selected: function (cardiologist) { 
    var cardiologistFullName = '%@ %@'.fmt(Em.get(cardiologist, 'lastName'), Em.get(cardiologist, 'firstName')); 
    this.set('controller.content.cardiologistFullName', cardiologistFullName); 
    this.set('value', Em.get(cardiologist, 'id')); 
    } 
});

和車把：

{{view APP.CardiologistsTypeAhead 
classNames="col-sm-6" 
label="Cardiologist:" 
valueBinding="controller.content.referrerCardiologist"}}

來源

2013-10-28 14:59:40 pjlammertyn

真棒項目！書籤。我一定會看看你的實現。萬分感謝！ – David

不確定這個答案是否真的回答你的問題。它只能爲你提供解決方案，但沒有關於如何解決Ember的問題。 –

您可能想爲此使用組件。

之後的祕密是Ember組件（和View）公開了一個this.$函數，它是一個作用域爲當前視圖的jQuery選擇器。所以你只需要這樣做：

didInsertElement: function() { 
    this.$(".typeahead"); // ... etc 
}

來源

2013-10-28 14:57:35

哈啊，那是缺少的環節。欣賞它。 – David

ember.js自定義組件或視圖

回答

相關問題