Question

我正在将modals实现为ember组件，我想知道是否以及如何实现这一点：如果模态的内容来自不同的页面，它将如何呈现为模板：

实施例： http://jsfiddle.net/koala_dev/NUCgp/918/ 上面的脚本打开一个包含以下内容的模态： http://fiddle.jshell.net/bHmRB/51/show/

但是，如果我想要一些依赖于特定用户的额外数据，来自路由模型呢？我如何插入类似

的内容

 {{#each link in links}} 
   {{#link-to 'link.url'}}{{link.title}}{{/link-to}}
{{/each}}

进入远程页面，因此它将呈现为模板，而不是常规文本？

Answer 1

这是一个非常快速简单的例子，只是为了给你一个正确的方向。您可以使用它并解析html以提取内容（与问题无关）。

您可以为模态元素设置组件。我已经设置了一个组件属性（属性）contentURL，您可以在其中设置内容的网址。

组件把手

注意我们稍后在操作中用来保存ajax结果的{{content}}。在链接上添加了动作showModal以执行ajax调用。

<script type="text/x-handlebars" id="components/bootstrap-modal">
    <a data-toggle="modal" data-target="#myModal" {{action "showModal"}}>Click me !</a>
    <!-- Modal -->

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">Modal title</h4>
                 </div>
                 <div class="modal-body">{{content}}</div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary">Save changes</button>
                 </div>
             </div>
             <!-- /.modal-content -->
         </div>
         <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->
</script>

组件JS

App.BootstrapModalComponent = Ember.Component.extend({
    /*initModal: function(){

    }.on('didInsertElement'),*/
    contentURL: null,
    content: 'Content is loading...',
    actions: {
        showModal: function(){
            var self = this;
            var contentURL = this.get('contentURL');

            if(contentURL == null){
                this.set('content', '<p>No content url is given</p>');
            }

            console.log('get content from url > ' + contentURL);
            $.ajax({
              url: contentURL,
              dataType: "html",
                beforeSend: function(){console.log('before send');},
                error: function(xhr, status, message){
                    console.log(message);
                },
                success: function (content) {
                    // parse and get the right html for the content
                    self.set('content', content);
              }
            });

        }
    }
});

现在，您可以在模板上调用组件bootstrap-modal，例如{{bootstrap-modal}}

例如：

<script type="text/x-handlebars" id="index">
    {{bootstrap-modal contentURL="http://fiddle.jshell.net/bHmRB/51/show/"}}
</script>

jsFiddle示例http://jsfiddle.net/sisir/NUCgp/1713/

来自远程页面的模态模板

1 个答案:

组件把手

组件JS

例如：