web-dev-qa-db-ja.com

KnockoutJSの変数$ dataの起源と目的は何ですか？

KnockoutJS tutorials で、説明できない変数$dataを含む次のコード例を見つけました。

ビュー（html）：

<!-- Folders -->
<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul>
<script type="text/html" id="folderTemplate">
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },
                   click: function() { mailViewModel.selectFolder($data) }">
        ${$data}
    </li>    
</script>

ビューモデル（JavaScript）：

var viewModel = {
    // Data
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    selectedFolder: ko.observable('Inbox'),

    // Behaviours
    selectFolder: function (folder) {
        this.selectedFolder(folder);
    }    
};

window.mailViewModel = viewModel;
ko.applyBindings(viewModel);

チュートリアルには、そのドル記号が何のために使用されているのか、この$dataがどこから来たのかの説明は含まれていません。変数$dataはどこにも定義されていません。$dataの3つのインスタンスすべてを$foobarに名前変更すると、この例は機能しなくなります。

ここではどのような魔法が起こっていますか？

javascripthtmlknockout.js
66
dokaspar

$data変数は、バインドされている現在のオブジェクトを参照するために使用される組み込み変数です。例では、これはviewModel.folders配列の要素の1つです。

40
Thedric Walker

$ dataは Knockoutのバインドコンテキスト の一部です。

すべての組み込み変数は次のとおりです。

  • $ parent
  • $ parents
  • $ root
  • $ component
  • $ data
  • $ index（foreachバインディング内でのみ使用可能）
  • $ parentContext
  • $ rawData
  • $ componentTemplateNodes
64
Derek Smith

私はそれを機能させました

.selected {
    color:red;
}

<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul>
<script type="text/html" id="folderTemplate">
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },text:$data,
                   click: function() { mailViewModel.selectFolder($data) }">
    </li>    
</script>

var viewModel = {
    // Data
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    selectedFolder: ko.observable('Inbox'),

    // Behaviours
    selectFolder: function (folder) {
        this.selectedFolder(folder);
    }    
};

window.mailViewModel = viewModel;
ko.applyBindings(viewModel);

http://jsfiddle.net/bowen31337/48RDd/ をご覧ください

0
bowen