0

私はこの3日間で苦労していて、最初のviewModelが機能しているのに、2番目が機能していない理由を理解できません。それでも、console.log（）は何も許可されません。

私の見解モデルとkoバインディング：

// KO View Models
var indexViewModel = {
    item: ko.observableArray([]),
    cat: ko.observableArray([]),
    loadcontent: function () {
        alert("inside index function");
        $.ajax({
            url: '/api/item/all',
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                indexViewModel.item(getArray);
            }
        });
        $.ajax({
            url: '/api/category/all',
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                indexViewModel.cat(getArray);
            }
        });
    }
};
var dataReal = null;
var itemViewModel = {
    item: ko.observableArray([]),
    loadcontent: function (getID) {
        alert(getID);
        $.ajax({
            url: '/api/item/details/' + getID,
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                itemViewModel.item(getArray);
                dataReal = data;
            },
            error: function (xhr, status) {
                switch (status) {
                    case 404:
                        alert('File not found');
                        break;
                    case 500:
                        alert('Server error');
                        break;
                    case 0:
                        alert('Request aborted');
                        break;
                    default:
                        alert('Unknown error ' + status);
                }
            }
        });
    }
};

var mainViewModel = {
    indexPage: indexViewModel,
    itemPage: itemViewModel
};

ko.applyBindings(mainViewModel);

私の作業用HTML：

<div id="index-content" data-bind="init: mainViewModel.indexPage.loadcontent(), with: mainViewModel.indexPage">
    <div class="item-list" data-bind="foreach: item">
        <div class="item-container clearfix">
            <div class="item-content clearfix">
                <div class="title" data-bind="text: Title">
                </div>
                <div class="left-side clearfix">
                    <div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
                    </div>
                    <div class="item-descr">
                        <div class="body" data-bind="text: Body">
                        </div>
                        <div class="item-more-details">
                            Vairāk...
                        </div>
                    </div>
                </div>

そして、HTMLウィッチは私のconsole.log（）呼び出しさえ無視します：

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int id = ViewBag.id;
}

<div id="item-details-content">
    <input type="hidden" id="item-id" value="@id" data-bind=""/>
    <div class="item-list" data-bind="init: itemPage.loadcontent(@id), with: itemPage.item">
        <div class="item-container clearfix" data-bind="init: console.log($root)">
            <div class="item-content clearfix">
                <div class="title" data-bind="text: Title">
                </div>
                <div class="left-side clearfix">
                    <div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
                    </div>
                    <div class="item-descr">
                        <div class="body" data-bind="text: Body">
                        </div>
                        <div class="item-more-details">
                            Vairāk...
                        </div>
                    </div>
                </div>

質問

  1. 私は何が間違っているのですか？
  2. 構文エラーはどこにありますか？
  3. ここでconsole.log（）を機能させるにはどうすればよいですか？
  4. 多分私の問題に代わるものがあるかもしれません、多分私はKO.jsの概念を誤解していますか？

結論

  1. alert（）がデータを表示するため、内部にデータがあることはわかっていますが、値が！mainViewModel.itemPage.loadcontent($.ajax(data))に渡されません。item
  2. 私は初心者で、まったくの初心者です。私がややまともなプログラマーだと思ったら、今はまったく馬鹿げていると思います。KO.jsが嫌いになり始めていますが、非常に必要です。
  3. 注：デバッグセクションで、インデックスページが正常に機能していることがわかります。

デバッグ場所

ここに公開されたWebアプリケーションがあります

そしてここに単一アイテムのページがあります

ありがとうございました

私を助けてくれたみんなに感謝します、私はとてもイライラしたので、私はこれ以上明白なものを見ることさえできませんでした、もう一度ありがとう！乾杯！

4

2 に答える 2

1

1）一見したところ、HTMLバインディングがmainViewModelを参照していることに気付きました。例えば：

data-bind="init: mainViewModel.itemPage.loadcontent(@id), with: mainViewModel.itemPage.item

おそらく

data-bind="init: itemPage.loadcontent(@id), with: itemPage.item

すでにmainViewModelにバインドされています

2）デバッグの場合、これを使用して、ビューで何にバインドされているかを確認します。

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

3）返されるデータは配列ではありませんが、そのように扱っています。

$.ajax({
    url: '/api/item/details/' + getID,
    dataType: 'json',
    success: function (data) {
        var getArray = [];
        $.each(data, function (index, item) {
            getArray[index] = item;
        });
        itemViewModel.item(getArray);
        dataReal = data;
    },

http://jsfiddle.netでサンプルを作成すると、さらにサポートできます。

于 2012-08-13T21:54:43.137 に答える
1

  1. data-bind要素内では、applyBindings()関数で指定したオブジェクトに関連するモデルを参照しています。あなたの場合、あなたはを呼び出しapplyBindings(mainViewModel)たので、バインディング自体では、mainViewModelそれ自体ではなく、そのプロパティを参照します。

  2. 動作していないHTMLでは、<div class="item-container clearfix" data-bind="console.log($root)">疑わしいようです。これはどのようなバインディングですか？バインドする特定のプロパティは指定されません。

  3. ブラウザの開発者ツール（FirefoxのFirebug、Chrome / IEの開発者ツール...）を使用して、構文エラーを確認します。バインディングに問題がある場合は、そこに表示されます。

于 2012-08-13T22:00:20.847 に答える