Javascript 从控制器为平铺状态设置视图属性的简单预加载程序？

我想为列表中的每个磁贴的ajax请求添加一个简单的预加载程序。我的模型中有一个项目列表，但我只想在匹配的磁贴中显示预加载程序。目前，我的示例显示了所有分幅的预加载程序，这可能是因为我在控制器上设置isLoading，而我真的想在触发它的视图上设置isLoading

因此，我的问题是如何将isLoading设置为仅调用相应控制器的视图，以防止预加载！！文本是否显示在所有平铺列表项中

<script type="text/x-handlebars" id="index">
<ul>
  {{#each item in model}}
    <li>{{partial 'tile'}}</li>
  {{/each}}
</ul>

{{{#模型中的每个项目}
{{partial'tile'}}
{{/每个}}

磁贴：{{item}
载我
{{{#如果正在加载}
预加载！！
{{/if}
App=Ember.Application.create（）；
App.Router.map（函数（）{
//把你的路线放在这里
});
App.IndexRoute=Ember.Route.extend({
模型：函数（）{
返回[‘红色’、‘黄色’、‘蓝色’]；
}
});
App.IndexController=Ember.ArrayController.extend({
行动：{
搜索：函数（）{
if（this.get（'isLoading'））{
返回；
}
此.set（'isLoading'，true）；
var=这个；
//这里是Ajax的东西
setTimeout（函数（）{
set（'isLoading'，false）；
}, 3000);
}
}
});
App.IndexView=Ember.View.extend({
孤岛加载：false，
行动：{
搜索：“搜索”
}
});

---

部分辅助程序不会为每个磁贴创建单独的视图 （记录）。因此，

isLoading

变量将是单个的，并且对所有平铺实例都是通用的。这就是所有磁贴都显示预加载的原因

为了解决这个问题，有很多方法，我将演示使用

{{view}

帮助程序和

{{render}

帮助程序的两种方法

{{view}}助手

要使用此辅助对象，需要创建一个视图，并执行以下步骤

将分部的模板重命名为

tile

将

{{partial}}

帮助程序替换为

{{view}}

帮助程序

创建将由

{{view}

帮助程序呈现的

TileView

我建议将与显示加载相关的ui逻辑移动到

视图

，同时使用回调隐藏加载，并让

控制器

清楚地只处理ajax/业务逻辑部分

通过设置

view.isLoading

，修改视图模板以检查视图变量，并通过调用

send

将

{action}

帮助程序的

目标设置为
视图
，以便在事件委托给
控制器之前显示加载情况

hbs

<script type="text/x-handlebars" id="index">
    <ul>
      {{#each item in model}}
        <li>{{view App.TileView}}</li>
      {{/each}}
    </ul>
  </script>

<script type="text/x-handlebars" data-template-name="tile">
    TILE: {{item}}

    <button {{action "search" target="view"}}>Load me</button>

    {{#if view.isLoading}}
      <h1>Preloading!!</h1>
    {{/if}}
  </script>

    App.IndexController = Ember.ArrayController.extend({
    actions: {
        search: function(callback){
            //Ajax stuff here
            setTimeout(function(){

                callback();
            }, 3000);
        }
    }
});

App.TileView = Ember.View.extend({
    templateName:'tile',
    isLoading: false,
    actions:{
        search:function(){
            var self = this;
            this.set('isLoading', true);
            this.get("controller").send("search",function(){
                self.set('isLoading',false);
            });
        }
    }
});

<script type="text/x-handlebars" id="index">
    <ul>
      {{#each item in model}}
        <li>{{render 'tile' item}}</li>
      {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="tile">
    TILE: {{item}}

    <button {{action "search" target="view"}}>Load me</button>

    {{#if view.isLoading}}
      <h1>Preloading!!</h1>
    {{/if}}
  </script>

App.TileController = Ember.ObjectController.extend({
    actions: {
        search: function(callback){

            //Ajax stuff here
            setTimeout(function(){
                callback();
            }, 3000);
        }
    }
});

App.TileView = Ember.View.extend({
    isLoading: false,
    actions:{
        search: function(){
            var self = this;
            this.set('isLoading', true);
            this.get("controller").send("search",function(){
                self.set('isLoading',false);
            });
        }
    }
});

{{render}helper

通过使用此帮助器，可以为每个视图创建一个单独的

ObjectController

实例，以执行仅与视图范围相关的逻辑，而不是将其放置在

ArrayController

（注意：通过使用前面的解决方案以及

ArrayController的
itemController
，也可以使用单独的
ObjectController
)

将分部的模板重命名为
tile
将
{{partial}}
帮助程序替换为
{{render}
帮助程序
创建将由
{{render}
帮助程序渲染的
TileView
创建将由
{{render}
帮助程序使用的
TileController
我建议将与显示加载相关的ui逻辑移动到
视图
，同时使用回调隐藏加载，并让
控制器
清楚地只处理ajax/业务逻辑部分
通过设置
view.isLoading
，修改视图模板以检查视图变量，并通过调用
send
将
{action}
帮助程序的
目标设置为
视图
，以便在事件委托给
控制器之前显示加载情况


hbs

<script type="text/x-handlebars" id="index">
    <ul>
      {{#each item in model}}
        <li>{{view App.TileView}}</li>
      {{/each}}
    </ul>
  </script>

<script type="text/x-handlebars" data-template-name="tile">
    TILE: {{item}}

    <button {{action "search" target="view"}}>Load me</button>

    {{#if view.isLoading}}
      <h1>Preloading!!</h1>
    {{/if}}
  </script>

    App.IndexController = Ember.ArrayController.extend({
    actions: {
        search: function(callback){
            //Ajax stuff here
            setTimeout(function(){

                callback();
            }, 3000);
        }
    }
});

App.TileView = Ember.View.extend({
    templateName:'tile',
    isLoading: false,
    actions:{
        search:function(){
            var self = this;
            this.set('isLoading', true);
            this.get("controller").send("search",function(){
                self.set('isLoading',false);
            });
        }
    }
});

<script type="text/x-handlebars" id="index">
    <ul>
      {{#each item in model}}
        <li>{{render 'tile' item}}</li>
      {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="tile">
    TILE: {{item}}

    <button {{action "search" target="view"}}>Load me</button>

    {{#if view.isLoading}}
      <h1>Preloading!!</h1>
    {{/if}}
  </script>

App.TileController = Ember.ObjectController.extend({
    actions: {
        search: function(callback){

            //Ajax stuff here
            setTimeout(function(){
                callback();
            }, 3000);
        }
    }
});

App.TileView = Ember.View.extend({
    isLoading: false,
    actions:{
        search: function(){
            var self = this;
            this.set('isLoading', true);
            this.get("controller").send("search",function(){
                self.set('isLoading',false);
            });
        }
    }
});

非常感谢您的解释。