淘汰 Javascript 选择返回 Object 对象答案

【问题标题】：Knockout Javascript select returns Object object淘汰 Javascript 选择返回 Object 对象
【发布时间】：2015-05-29 02:19:27
【问题描述】：

我正在使用 Knockout 和这样的选择：

   function journal(data) {
        this.id = ko.observable(data.ID);
        this.name = ko.observable(data.Name);
   }

   var self = this;
   self.journals = ko.observableArray([]);

   $.getJSON("/JournalEntries/GetJournalsList", function (data) {
            var mappedJournals = $.map(data, function (item) { return new journal(item) });
            self.journals(mappedJournals);
   });

   self.getData = function(journalid) {
        alert(journalid);
   };

在 HTML 部分是：

<select data-bind="options: $root.journals, optionsCaption: 'Choose...', value: 'id', optionsText: 'name', event:{ change: $root.getData }"></select>

而且它没有返回一个 ID，只是 '[Object object]'

我做错了什么？

【问题讨论】：

打开开发者工具并将其记录到控制台而不是警报。对象包含什么？另外，如果这不能证明是多事的，请尝试创建一个新的 observable，例如 var test = ko.observable(); 并将其用作您的 value.. 就像 value: test,.. 并提醒它，看看您得到了什么...例如示例3 在docs

标签： javascript knockout.js

【解决方案1】：

您通常不希望在淘汰赛中以这种方式对事件做出反应。

如果您想对 <select> 中所选值的更改做出反应，请将所选值保存到 observable（通过 value 绑定）并订阅该 observable（或基于该 observable 的计算值） .

function Journal(data) {
    this.id = ko.observable(data.ID);
    this.name = ko.observable(data.Name);
}

function ViewModel() {
    var self = this;

    // data
    self.journals = ko.observableArray();
    self.selectedJournal = ko.observable();

    // subscriptions
    self.selectedJournal.subscribe(function (journal) {
       if (journal) alert( journal.id() );
    });

    // init
    var newJournals = ko.utils.arrayMap([
        {ID: 1, Name: "Item 1"},
        {ID: 2, Name: "Item 2"},
        {ID: 3, Name: "Item 3"},
        {ID: 4, Name: "Item 4"},
    ], function(item) { return new Journal(item); });

    self.journals(newJournals);
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="
  options: journals,
  optionsCaption: 'Choose...',
  optionsText: 'name',
  value: selectedJournal
"></select>

<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

【讨论】：

我已经尝试了两种方式 - 你在这里的方式和我发布的方式。我想这样做，但它也不起作用，所以我尝试了另一种方式。答案实际上就在你的答案之内......我发现我需要这样写：“journal.id()”而不是“journal”或“journal.id”——最后的括号会有所不同。它也适用于“ko.unwrap(journal.id)”。
这是我使用它的方式，它对我来说效果很好。从来没有遇到过问题。
@Barray 使用ko.unwrap() 实际上更聪明，因为它不对值的性质做出任何假设。

【解决方案2】：

self.journals是一个Observable数组，就像javascript中的普通数组一样需要push，item进入数组

 self.journals.push(mappedJournals);

【讨论】：

有了这个我什至没有任何选择，没有推送我有选择
value = 选定值，optionsValue: 'id'
我在查看选项时没有任何问题...就在我尝试获取选择更改的值时...警报显示：“[object Object]”
你需要更深入地了解 obj，也许发布你的 json 或小提琴，谢谢@SHammelburg
knockoutjs.com/documentation/options-binding.html 显示选择元素绑定选项