4

私はゆっくりと EmberJS のコツをつかみ始めています。残念ながら、うまくいかないように見える問題に遭遇しました。

JSON を介して取得する複雑なデータ構造があり、複数のネストされた配列があり、#each ヘルパーをネストできないようです。

テンプレートを次のように設定しました（短縮）：

{{#each Servers}}
     <div class="server">
          <h1>{{unbound Name}}</h1>
          Time: {{jsonDate CurrentTime}}<br />

          <table>
               {{#each Processes}}
                    <tr>
                         <td>{{unbound Name}}</td>
                         <td>{{unbound Location}}</td>
                    </tr>     
               {{/each}}
          </table>
     </div>
{{#/each}}

Ember を変更してメッセージをログに記録すると、2 番目のループが実行されないようです。

2 番目の #each を #Queue に置き換えると機能しますが、-element の直前に、リスト内のすべての要素に対して「未定義」のテキストが挿入されます (マイナス 1)。

#each を他のループの外に移動し、キューへの直接パス (例: Servers.0.Queue) に入れると、正常に動作するため、データではありません。

これを修正するにはどうすればよいですか? ネストされた #each が不可能な場合、他のメソッドの「未定義」テキストを優先するにはどうすればよいですか? 他の可能性はありますか？

PS。私はパフォーマンス上の理由から unbound を使用します。Servers オブジェクトを一度に更新して観察するので、バインドされたプロパティを使用する必要はありません。ブラウザーのパフォーマンスが大幅に低下することに気付いたので (CPU 使用率は 13% ですが、unbound では 0 になりました)。 %)。関連するかどうかはわかりません。

編集

参照してください: http://jsfiddle.net/PTC9B/7/

結局、ServerOverview2a メソッドは機能します。どうやら ServerOverview2b は、先ほど説明した「未定義」のテキストを生成するようです。おそらく、そのバグ レポートを提出する必要がありますか?

私の質問は次のとおりです。 #Processes が機能するのに、ネストされた #each が機能しないのはなぜですか?

4

3 に答える 3

6

ハッシュ内のプロパティが問題を引き起こしているようです。大文字のプロパティを使用してProcessesも機能しません。ヘルパーに変更するとprocesses、期待どおりに機能します。http ：//jsfiddle.net/pangratz666/ndkWt/を参照してください。each

<script type="text/x-handlebars" data-template-name="app-server">
    <h1>Default</h1>
    {{#each data.Servers}}
        <div class="server">
            <h1>{{unbound this.Name}}</h1>

            Time: {{unbound this.CurrentTime}}<br />

            <table>
                {{#each this.processes}}
                    <tr>
                        <td>{{unbound Name}}</td>
                        <td>{{unbound Location}}</td>
                    </tr>     
                {{/each}}
            </table>
        </div>
    {{/each}}
</script>​

App = Ember.Application.create({
    ready: function() {
        Ember.View.create({
            templateName: 'app-server',
            dataBinding: 'App.dataController.data'
        }).append();

        App.dataController.getServers();
    }
});

App.dataController = Ember.Object.create({
    data: {},
    getServers: function() {
        this.set('data', Ember.Object.create({
            "Servers": [
                {
                "Name": "USWest",
                "CurrentTime": "1337",
                "processes": [
                    {
                        "Name": "apache.exe",
                        ...
                    }
                ]}
            ]
        }));
    }
});​

参照しているIMHOthis.Processesはヘルパーで機能するはずな#eachので、これはバグである可能性があります。サーバーから取得したJSONのプロパティ名を変更できますか？それ以外の場合は、使用する前にJSONのプロパティ名を小文字にするヘルパーを作成する可能性があります...

別の注意：Application#ready実行するJSを指定したため、提供されたJSFiddleでは機能しませんでしたonDomReady（JSFiddleの左上隅にあるドロップダウンを選択してください）。これをに変更すると、コールバック内でno wrapアクセスできます。Appready

名前付けに関する別の注意：インスタンスにはlowerCase、クラスにはUpperCaseという名前を付ける必要があります。だからそれはApp.serverOverview1 = Ember.View.create({ ... });あなたの例になります。

于 2012-04-25T08:04:54.230 に答える
2

Ember は、大文字のプロパティがあるかどうかによって、パスが絶対 (グローバル) か相対 (ローカル) かを推測しようとします。Processesこの場合、Ember は存在しないグローバル プロパティを探しています。@pangratz が指摘したように、簡単な解決策は小文字を使用することです。詳細については、 http://www.emberist.com/2012/04/09/naming-conventions.htmlを参照してください。

于 2012-04-25T14:56:55.593 に答える
0

これが私が作った後処理方法です：

function decapitalizeJSON(data, dataType) {
    var output = (dataType == undefined || dataType == '[object Object]') ? {} : [];
    var value, type;

    for(var key in data) {
        if(!data.hasOwnProperty(key)) {
            continue;
        }

        value = data[key];
        type = Object.prototype.toString.apply(value);

        if (type == '[object Array]' || type == '[object Object]') {
            output[key.charAt(0).toLowerCase() + key.substr(1)] = decapitalizeJSON(value, type);
        }
        else {
            output[key.charAt(0).toLowerCase() + key.substr(1)] = value;
        }
    }

    return output;
}

しかし、それは退屈なほど遅いです-当然のことながら。はhasOwnProperty、EmberがArrayオブジェクトに追加するメソッドをコピーしようとするのを防ぐために必要であり、すべての大文字を解除することを確実にするために再帰的です。私の場合、配列の大文字を削除するように最適化できるかもしれませんが、命名規則を再び混ぜ合わせています。

代わりに、APIサプライヤーに「emberHack」プロパティを追加するように要求しました。これが渡されると、適切なJSON Emberが期待し、それが許可されますが、「不完全な」要件と言われます。ただし、ほとんどのAPIサプライヤーは私のように寛大ではないことを保証できます。

于 2012-04-26T12:58:24.833 に答える