2013-01-11 27 views
16

Tôi đang sử dụng Ember và chế độ xem của tôi được hiển thị ở cuối phần HTML DOM của tôi, thay vì bên trong phần tử div của tôi. Đây là mã nguồn của tôi:Chế độ xem Ember được hiển thị ở dưới cùng của DOM

index.html:

<body> 
    <div id="test"> 
    <script type="text/x-handlebars"> 
     {{view Skills.RecommendedSkillsListView}} 
    </script> 
    </div> 

    <script type="text/x-handlebars" data-template-name="recommended_skills_list"> 
    <a href="#" {{action "b"}}>DO A NEW THING</a> 
    </script> 

    <script src="js/libs/jquery-1.8.3.min.js"></script> 
    <script src="js/libs/handlebars-1.0.rc.1.js"></script> 
    <script src="js/libs/ember-1.0.0-pre.2.js"></script> 
    <script src="js/app.js"></script> 
</body> 

app.js:

Skills = Ember.Application.create({}); 
Skills.RecommendedSkillsListView = Ember.View.extend({ 
    templateName: 'recommended_skills_list', 
    b: function(v) { 
     alert('new hello'); 
    }  
}); 
Skills.initialize(); 

Văn bản hiển thị:

<body class="ember-application"> 
    <div id="test"></div> 

    <script src="js/libs/jquery-1.8.3.min.js"></script> 
    <script src="js/libs/handlebars-1.0.rc.1.js"></script> 
    <script src="js/libs/ember-1.0.0-pre.2.js"></script> 
    <script src="js/app.js"></script> 

    <div id="ember135" class="ember-view"> 
    <div id="ember140" class="ember-view"> 
     <a href="#" data-ember-action="1">DO A NEW THING</a> 
    </div> 
    </div> 
</body> 

Lưu ý: khi sử dụng cùng một mã với phiên bản trước của ember (0.9.5), nó hoạt động như mong đợi

Trả lời

22

Ah, có vẻ như đó là 'gắn chế độ xem của bạn' vào nội dung mà bạn đã cung cấp 'ứng dụng 'tên mẫu mà Ember sẽ tìm kiếm. Tại sao không thử đặt một div bên trong cơ thể và sau đó tham khảo điều này trong Ember.Application.create() ;?

Ember.Router

Skills = Ember.Application.create({ 
    rootElement: '#test' 
}); 

Xem

<body> 
    <div id="test"></div> 

    <script src="js/libs/jquery-1.8.3.min.js"></script> 
    <script src="js/libs/handlebars-1.0.rc.1.js"></script> 
    <script src="js/libs/ember-1.0.0-pre.2.js"></script> 
    <script src="js/app.js"></script> 

    <div id="ember135" class="ember-view"> 
    <div id="ember140" class="ember-view"> 
     <a href="#" data-ember-action="1">DO A NEW THING</a> 
    </div> 
    </div> 
</body> 

Hãy cho tôi biết nếu tôi đã bỏ lỡ điểm;)

+0

Cám ơn câu trả lời của bạn, nhưng điều này thực sự không giải quyết được vấn đề thực sự:/xem xét của tôi để câu trả lời trước đó! – alxscms

+0

Xin hãy giúp tôi bằng cách giải thích downvote (ai downvoted) cảm ơn :) –

11

Bạn cần phải xác định các yếu tố để làm cho ứng dụng của bạn để sử dụng số rootElement (docs here, câu hỏi liên quan: Emberjs rootElement) thuộc tính của ứng dụng của bạn:

Skills = Ember.Application.create({ 
    rootElement: "#test" 
}); 

Dưới đây là một ví dụ làm việc: jsfiddle example

đầu ra rendered từ ví dụ:

<body> 
    <div id="test" class="ember-application"> 
    <div id="ember135" class="ember-view"> 
     <div id="ember140" class="ember-view"> 
     <a href="#" data-ember-action="1">DO A NEW THING</a> 
     </div> 
    </div> 
    </div> 
</body> 
+0

Giải pháp này thực sự hoạt động trong ví dụ của tôi, nhưng nếu tôi có hai phần tử div (#test và # test2) trong đó tôi muốn có một khung nhìn cụ thể trong mỗi phần tử div? Giải pháp của bạn chỉ cho phép tôi thay đổi thư mục gốc, nhưng không thực sự giải quyết được vấn đề của tôi. Có ý tưởng nào không? (Mã của tôi ở đây hoạt động hoàn hảo với ember-1.0.pre.min.js) Cảm ơn bạn đã dành thời gian! – alxscms

+0

@alxscms Bạn nên có tất cả các mẫu ember của bạn được hiển thị dưới 'rootElement' duy nhất của ứng dụng của bạn, nhưng bạn có thể sử dụng chức năng ember để có sự linh hoạt hoàn toàn về các phần tử được hiển thị ở bên trong' rootElement' của bạn. Dưới đây là ví dụ về việc có 3 chế độ xem được hiển thị cạnh nhau (http://jsfiddle.net/arasbm/fLBty/3/). Nó hơi lạc hậu, vì vậy bạn sẽ phải xem hướng dẫn hiện tại về cách thực hiện điều này trong phiên bản hiện tại của ember (http://emberjs.com/guides/). – CraigTeegarden

+0

Tôi cũng đã giải quyết nó bằng câu trả lời này, nhưng vẫn không biết tại sao nó không hoạt động. – icemelt7

Các vấn đề liên quan