Jquery模板中的Knockout.js和Select List Not Updating属性

Question

我不知道为什么我的依赖的可观察的URL没有在选择列表更改时更新。iframe应该在select on change事件时更新url，但是什么也没发生。虽然依赖的可观察对象是这个，但模板没有更新。它工作没有模板只有静态定义的HTML，但不是我试图创建一个模板和iframe不更新。

视图

    @model AvatarViewModel
    @{
        ViewBag.Title = "Index";
        Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
    }
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.instructor }'>
    </div>
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.assistantInstructor }'>
    </div>
    <div data-bind='template: { name: "editableAgentTemplate", data: caseStudy.opponent }'>
    </div>
    <script id="editableAgentTemplate" type="text/html">
        <div>
        <div>
            <iframe style="width: 125px; height: 100px; border: none" scrolling="no" frameborder="0"
                 data-bind="attr: { id: name, name: name, src: url }">
            </iframe>
        </div>
        <select data-bind="options: agents, optionsText: 'Title', optionsValue: 'Id', value: selectedId,">
        </select>
        <button data-bind="click: function() { caseStudy.saveAvatar(name, id) }">
            Update
        </button>
        <input type="text" data-bind="value: text" />
        <button data-bind="click: function() { app.viewModel.caseStudy.speak(text, name) }">
            Speak
        </button>
    </div>
    </script>
    @section Script {
        <script src="/Scripts/app.avatars.js" type="text/javascript"></script>
        <script src="/Areas/Admin/Scripts/app.admin.casestudy.avatars.js" type="text/javascript"></script>
        <script type="text/javascript">
            app.avatars.init(@Html.Raw(@Model.Avatars.ToJson()));
            app.admin.caseStudy.init('@ApplicationAvatarType.Instructor.ToString()', '@ApplicationAvatarType.AssistantInstructor', '@ApplicationAvatarType.Opponent');
        </script>
    }

JS文件

(function (app, $, undefined) {
    app.viewModel = app.viewModel || {};
    app.admin.caseStudy = app.admin.caseStudy || {};
    var controller = '/Admin/CaseStudy/Avatars';
    var urls = {
        GET_AVATARS: controller + '/GetAvatars',
        SAVE_AVATAR: controller + '/SaveAvatar'
    };
    var editableAgent = function () {
        this.id = ko.observable(0);
        this.selectedId = ko.observable(0),
        this.name = ko.observable('');
        this.text = ko.observable('');
        this.agents = ko.observableArray();
        this.url = ko.dependentObservable(function () {
            console.log('url');
            if (this.selectedId())
            return '/Avatar/Avatar?assetId=' + this.selectedId();
        else {
            return '';
        }
        }, this);
    };
    app.viewModel.caseStudy = {
        instructor: ko.observable(new editableAgent()),
        assistantInstructor: ko.observable(new editableAgent()),
        opponent: ko.observable(new editableAgent()),
        agents: ko.observableArray()
    };
    app.viewModel.caseStudy.speak = function (text, type) {
        if (text().length > 0) {
            app.avatars.addAction({ AgentName: type(), Text: text(), Speech: text() });
            app.avatars.speak();
        }
    };
    app.admin.caseStudy.init = function (instructor, assistantInstructor, opponent) {
        app.viewModel.caseStudy.instructor().name(instructor);
        app.viewModel.caseStudy.assistantInstructor().name(assistantInstructor);
        app.viewModel.caseStudy.opponent().name(opponent);
        app.admin.caseStudy.getAvatars(function () {
            app.applyBindings();
        });
    };

    app.admin.caseStudy.getAvatars = function (callback) {
        var options = {
            url: urls.GET_AVATARS,
            callback: function (json) {
                if (json) {
                    app.viewModel.caseStudy.agents(json.Avatars);
                    app.viewModel.caseStudy.instructor().agents(json.Avatars);
                    app.viewModel.caseStudy.opponent().agents(json.Avatars);
                    app.viewModel.caseStudy.assistantInstructor().agents(json.Avatars);
                    app.viewModel.caseStudy.instructor().selectedId(json.Instructor.AssetId);
                    app.viewModel.caseStudy.opponent().selectedId(json.Opponent.AssetId);
                    app.viewModel.caseStudy.assistantInstructor().selectedId(json.AssistantInstructor.AssetId);
                    app.viewModel.caseStudy.instructor().id(json.Instructor.AssetId);
                    app.viewModel.caseStudy.opponent().id(json.Opponent.AssetId);
                    app.viewModel.caseStudy.assistantInstructor().id(json.AssistantInstructor.AssetId);
                    if (typeof (callback) === 'function') {
                        callback();
                    }
                }
            }
        };
        app.makeRequest(options);
    };
    app.viewModel.caseStudy.saveAvatar = function (type, assetId) {
        var options = {
            url: urls.SAVE_AVATAR + '?type=' + type + '&assetId=' + assetId,
            callback: function (json) {
                if (json) {
                    alert('Saved');
                }
            }
        };
        app.makeRequest(options);
    };
})(window.app = window.app || {}, jQuery);

Answer 1

这个有这个问题的所有要素:https://github.com/SteveSanderson/knockout/issues/133

如果你可以在服务器或JavaScript中强制你的代理id为字符串(id + " works ")，那么你就不会看到这个问题。

同样，基于对代码的一些重组，这在1.3中不再是一个问题。因此，您可能想尝试一下beta版:http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/