نوكوتجس:إضافة خصائص ووظائف يمكن ملاحظتها إلى الكائنات في رسم الخرائط الذي تم إنشاؤه

Question

أنا جديد على نوكوتجس, ، وأنا عالق في محاولة لإضافة خصائص وأساليب إضافية إلى الكائنات التي تم إنشاؤها في ko.observableArray() كما تم إنشاؤها بواسطة mapping البرنامج المساعد.

هنا حيث أنا حتى:

• لدي مجموعة جسون من Users
• لقد أنشأت ko.observableArray() مع البرنامج المساعد لرسم الخرائط
• لقد حصلت على القالب الذي يخلق صف الجدول لكل User, ، حتى الآن جيد جدا: س)

وهنا ما أحاول القيام به:

كل User لديه خاصية تسمى 'IsActive' - أود أن data-bind حدث نقرة إلى طريقة على كل منها User الكائن الذي تبديل هذا 'IsActive' الملكية.

بدا هذا السؤال واعدا, ، ولكن يبدو أن الازدواجية غير الضرورية بالنسبة لي أن تضطر إلى إعلان نموذج العرض بأكمله في جس (إلا إذا كانت هذه هي الطريقة التي يجب أن أفعل ذلك!)- هل من الممكن أن مجرد تمديد الكائن ولدت?

كنت أفكر أكثر على طول هذه الخطوط, ، حيث توجد طريقة للإعلان عن خصائص أو طرق إضافية ، واطلب منها تمديد mapping الكائنات التي تم إنشاؤها ، ولكن هذه المقالة معنية بالكائنات المفردة بدلا من توسيع الكائنات في صفيف تم إنشاؤه.

وهنا رمز: http://jsfiddle.net/yZkSf/2/ (لا تعمل بعد في جس كمان-ولكن سأستمر في اللعب معها وتحديث هذا الرابط عندما أحصل عليه العمل).

شكرا لك على مساعدتك

Answer 1

هناك العديد من الخيارات التي يمكنك التفكير فيها.

- واحد هو استخدام create رد الاتصال للتحكم في كيفية إنشاء كائنات" المستخدم " الخاصة بك.يمكنك إما تحديد الملاحظات بنفسك وإضافة وظائف إضافية أو استدعاء المكون الإضافي لرسم الخرائط على كائن المستخدم الفردي ثم إضافة وظائف إضافية.

سيكون شيئا مثل: http://jsfiddle.net/rniemeyer/fkVaK/

- خلاف ذلك ، يمكنك وضع وظيفة "تبديل" على فيوموديل الخاص بك ومن ثم تمرير كائن "المستخدم" لذلك.

وهناك طريقة لطيفة مع 1.3 ، هو استخدام ko.dataFor جنبا إلى جنب مع شيء من هذا القبيل مسج لايف/مندوب/على وظيفة وفد الحدث.سيكون مثل: http://jsfiddle.net/rniemeyer/FkjNr/

//unobtrusive event handler
$(".toggle").live("click", function() {
    var user = ko.dataFor(this);
    if (user) {
       viewModel.toggleIsActive(user);
    }
});

إذا كنت لا ترغب في استخدام تفويض الحدث ، فيمكنك تمرير العنصر مباشرة باستخدام وظيفة مجهولة مثل: http://jsfiddle.net/rniemeyer/GpQtN/

تحرير:اعتبارا من 2.0 ، يتم تمرير البيانات الحالية تلقائيا إلى المعالج عند استخدام روابط النقر / الحدث ، بحيث يمكنك القيام بذلك فقط:

<a href="#" data-bind="click: $root.toggleIsActive"><span data-bind="text: IsActive"></span></a>

Answer 2

هذا هو ما خطرت لي باستخدام كل من الإجابات الخاصة بك وريان...يبدو أن العمل.يرجى ترك ردود الفعل ، وأنا جديدة على خروج المغلوب وغريبة نفسي ، إذا كان هذا هو نهج جيد.

شبيبة:

$(function() {
    $.get("users/getUsers", function(r){
        var vm = ko.mapping.fromJS(r, {
            users: {
                create: function(user){
                    var methods = {
                        toggleIsActive: function(u){u.IsActive(!u.IsActive());},
                        foo: function(u){console.log(u);},
                        bar: function(u){/*whatever*/},   
                    }
                    return $.extend(ko.mapping.fromJS(user.data), methods);
                }
            }
        });
        ko.applyBindings(vm);
    }, 'json');
});

دوم:

<!-- ko foreach: users -->
   <a href="#" data-bind="click: toggleIsActive"><span data-bind="text: IsActive"></span></a>
<!-- /ko -->

Answer 3

لقد وجدت طريقة للقيام بذلك ، ولكن هذا يعني حلقات من خلال الكائنات التي تم إنشاؤها في مجموعة مرة واحدة لقد تم إنشاؤها..أفضل طريقة لتحقيق نفس النتيجة بدون الحلقة الإضافية..

تحرير: كما يقترح آر بي نيماير في إجابته! ؛ س)

على أي حال ، طريقة واحدة لإضافة خصائص إلى كائن موجود هو استخدام مسج تمديد () الجمع بين الكائنات.

أولا ، أعلن عن الخصائص والوظائف الإضافية في كائن جديد:

var userModel = {
    toggleIsActive: function() {
        console.log('toggleIsActive called: before: ' + this.IsActive());
        this.IsActive(!this.IsActive());
        // todo: save!
        console.log('toggleIsActive called: after: ' + this.IsActive());
    }
}

ثم ، بعد ko.mapping.fromJS() اتصل, ولكن قبل ko.applyBindings() اتصل, ، حلقة من خلال الكائنات في مجموعة ولدت وتمديدها:

viewModel.users = ko.mapping.fromJSON(/* get JSON */);

for (var i = 0; i < viewModel.users().length; i++) {
    $.extend(viewModel.users()[i], userModel);
}

ko.applyBindings(viewModel);