Question

我有一些属性和函数的变量我正试图去看这些房产，但这给了我空洞。我能做什么？例如：

    var exports = {

    city: ko.observable(),
    street: ko.observable().extend({ required: true, number:true}),

    back : function(){
       console.log(this.city);
    },

HTML

        <button data-bind="click: back" class="btn btn-default">Back</button>

我还附上了完整的HTML和JS。对此，我无法得到this.myAcmout（）。响应功能：

HTML

<div class="responses">
<div role="form" class="form-horizontal">

    <div class="form-group">
        <label class="col-sm-1 control-label">{{_t('Responses')}}</label>

        <div class="col-sm-10">

            <div class="form-control-static" data-bind="visible: request.responses().length == 0">
                {{_t('No responses.')}}
            </div>

            <table class="table table-striped table-hover col-sm-12"
                   data-bind="visible: request.responses().length > 0">
                <thead>
                <tr>
                    <th>{{_t('Created')}}</th>
                    <th>{{_t('Amount')}}</th>
                    <th>{{_t('Rate')}}</th>
                    <th>{{_t('Distance')}}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody data-bind="foreach: request.responses()">
                <tr class="clickable">
                    <td>{{since()}}</td>
                    <td>{{amount}}</td>
                    <td>{{rate}}</td>
                    <td>{{distance}}</td>
                    <td>
                        <a data-bind="click: action">{{_t('Details')}}</a>
                </tr>
                </tbody>
            </table>

        </div>
    </div>


    <!-- ko if: !isRequestor -->
    <h5>{{_t('Your response')}}</h5>

    <div class="form-group" data-bind="css: { hideErrors: !hasBeenSubmittedOnce()}">

        <label class="col-sm-1 control-label">{{_t('Amount')}}</label>

        <div class="col-sm-2">
        <input type="text" id="myAmountInput" class="form-control" data-bind="'autoNumeric: myAmount'">
            </div>

        <div class="col-sm-1">
            <p class="form-control-static">{{ request.requestedCurrency }}</p>
        </div>

    </div>
    <!-- /ko -->


</div>


<div class="x-btn-row">
    <button class="btn btn-primary" type="button" data-bind="visible: !isRequestor, click: respond">
        {{isResponder() ? _t('Update response') : _t('Respond')}}
    </button>
    <button data-bind="visible: isRequestor || isResponder(), click: cancel" class="btn btn-danger">{{_t('Cancel')
        }}</button>
    <button data-bind="click: back" class="btn btn-default">{{_t('Back')}}</button>

</div>

JS

define(['knockout', 'knockout-validation', 'services/changeup', 'moment', 'lodash', 'plugins/router'], function (ko, validation, changeup, moment, _, router) {

ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'error',
    errorMessageClass: 'help-inline '
});

function tick(){
    var request = exports.request;
    console.log('tick', request);
    if(request){
        request.endsIn(moment.utc(request.expiresAt).fromNow());
        _.each(request.responses(), function(rs){
            rs.since(moment.utc(rs.createdAt).fromNow());
        });
    }
}

function belongsToUserInfo(r){
    return r && exports.userInfo && r.username === exports.userInfo.username;
}

var timerId = setInterval(tick, 1000 * 10);

var exports = {

    isRequestor: undefined,

    myAmount: ko.observable().extend({ required: true, number:true}),

    isResponder: ko.observable(),

    request: undefined,

    userInfo: undefined,

    hasBeenSubmittedOnce : ko.observable(false),

    errors : ko.validation.group(this),

    action : function(){

    },

    back : function(){
    },

    cancel : function(){
    },

    respond: function(scope){
        console.log(this.myAmount());
        this.hasBeenSubmittedOnce(true);
        var r=confirm("Are you sure you want to give proposal? your current proposal is: " + exports.request.amount);
        if (r===true){
            if (!this.myAmount.isValid()){
                this.errors.showAllMessages();
            } else {
                changeup.respond(exports.request._id, exports.myAmount()).then(function(){
                    router.navigate('dashboard');
                });
            }
        }
    },

    activate: function (activationData) {
    }

};


return exports;

}）;

Answer 1

我不确定您在哪里看到null值，但我想这可能归因于this.city。要访问可观察值，您应该执行类似这样的操作

  back : function(){
 console.log(this.city()); 
},

()末尾注意city。还有一件事，人们看到不相关价值的另一个最常见的事情是因为他们在错误的范围内定义了this。

您应该以这种方式调用此back函数

<button data-bind="click: exports.back()" class="btn btn-default">Back</button>

Answer 2

除了缺少的括号（如其他指出的那样），我在这里看不到问题。你能用完整的代码发布一个小提琴吗？

这个正在运作：

<input type="text" data-bind="value: city" />
<button data-bind="click: back" class="btn btn-default">Back</button>  


var exports = {
    city: ko.observable('Los Angeles'),
    street: ko.observable().extend({
        required: true,
        number: true
    }),

    back: function (data) {
        console.log(data.city());      
        // or
        console.log(this.city());
        console.log(this.city);//incorrect
    }
};
ko.applyBindings(exports);

http://jsfiddle.net/barryman9000/cdjbX/1/

Knockout访问变量

2 个答案: