访问viewmodel中的KO组件字段

时间:2015-03-28 14:37:34

标签: javascript knockout.js knockout-components

我创建了我的第一个KO组件:

components.js

ko.components.register('team-dropdown', {
    viewModel: function (params) {

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

        $.ajax({
                url: 'http://footballcomps.cloudapp.net/Teams',
                type: 'get',
                contentType: 'application/json',
                success: function (data) {
                    $.each(data['value'], function (key, value) {
                        self.teamNames.push(value.TeamName);
                    });
                    console.dir(self.teamNames);
                },
                error: function (err) {
                    console.log(err);
                }
            });

        self.selectedTeam = ko.observable();
    },
    template: { require: 'text!components/team-dropdown.html' }
});

团队dropdown.html

<div id="teams" class="inputBlock form-group">
<select class="form-control" name="teamName" data-bind="options: teamNames, value:selectedTeam"></select>
<label id="lblHomeTeam" data-bind="text: selectedTeam"></label>

以下是我想要使用该组件的视图:

<div class="row" id="divFixture">
<div class="col-md-4">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h2 class="panel-title">Add new fixture</h2>
        </div>
        <div class="panel-body">

            <form data-bind="submit: fixture.addFixture">
                <div class="form-group">
                    <team-dropdown />
                </div>....
            </form>

我的剥离视图模型:

define(['knockout', 'knockout.validation', 'common', 'components'], function (ko) {

    return function fixtureViewModel() {

        function fixture(fixtureId, fixtureDate, homeId, homeName, homeBadge, homeScore, awayId, awayName, awayBadge, awayScore) {
            this.FixtureId = fixtureId;
            this.FixtureDate = fixtureDate;
            this.HomeId = homeId;
            this.HomeName = homeName;
            this.HomeBadge = homeBadge;
            this.HomeScore = homeScore;
            this.AwayId = awayId;
            this.AwayName = awayName;
            this.AwayBadge = awayBadge;
            this.AwayScore = awayScore;
        }

        var self = this;

        self.Id = ko.observable();
        self.FixtureDate = ko.observable();
        self.HomeId = ko.observable();
        self.HomeName = ko.observable();
        self.HomeBadge = ko.observable();
        self.HomeScore = ko.observable();
        self.AwayId = ko.observable();
        self.AwayName = ko.observable();
        self.AwayBadge = ko.observable();
        self.AwayScore = ko.observable();

        self.selectedTeam = ko.observable();

        self.addFixture = function() {

            //how do I reference the selected item from my component here?

    };     
});

如何在self.addFixture中引用我在组件中选择的项目?

1 个答案:

答案 0 :(得分:0)

由于team-dropdown是一个可重用的组件,因此您应该提供一种绑定它的方法。如你所知,它是一个独立的控件,外面的世界不能与它进行交互,除非通过你定义的观察点不能使它变得非常灵活。

我会在其中添加参数,您可以在其中设置要绑定到值的observable。你的灯具有一个selectedTeam属性,所以这似乎是一个可能的候选人。

ko.components.register('team-dropdown', {
    viewModel: function (params) {
        var self = this,
            teamNames = ko.observableArray([]),
            // default to a local observable if value not provided
            selectedTeam = params.value || ko.observable();

        // you probably don't want others to directly modify the teamNames array
        self.teamNames = ko.pureComputed(teamNames);
        self.selectedTeam = selectedTeam;

        $.ajax({
            url: 'http://footballcomps.cloudapp.net/Teams',
            type: 'get',
            contentType: 'application/json',
            success: function (data) {
                $.each(data['value'], function (key, value) {
                    // push to the local `teamNames` array
                    teamNames.push(value.TeamName);
                });
                console.dir(teamNames);
            },
            error: function (err) {
                console.log(err);
            }
        });
    },
    template: { require: 'text!components/team-dropdown.html' }
});

然后在使用组件时设置参数:

<form data-bind="submit: fixture.addFixture">
    <div class="form-group">
        <team-dropdown params="value: fixture.selectedTeam" />
    </div>
</form>

现在应该在灯具的selectedTeam中设置所选值,因此您可以使用它。

self.addFixture = function() {
    var selectedTeam = self.selectedTeam(); // should have the value
};