কিভাবে এএসপি.নেট এমভিসি ভিউমোডেলসের সাথে নকআউট.জেএস ব্যবহার করবেন?


129

খয়রাত

এটি কিছুক্ষণ হয়ে গেছে এবং আমার এখনও কয়েকটা অসামান্য প্রশ্ন রয়েছে। আমি আশা করি একটি অনুগ্রহ যোগ করে এই প্রশ্নগুলির উত্তর মিলবে।

  1. আপনি কীভাবে নকআউট.জেএস সহ এইচটিএমএল সহায়ক ব্যবহার করবেন
  2. এটিকে কাজ করতে দস্তাবেজের প্রস্তুত কেন প্রয়োজন ছিল (আরও তথ্যের জন্য প্রথম সম্পাদনা দেখুন)

  3. আমি যদি আমার ভিউ মডেলগুলির সাথে নকআউট ম্যাপিং ব্যবহার করি তবে কীভাবে আমি এই জাতীয় কিছু করব? ম্যাপিংয়ের কারণে আমার কোনও ফাংশন নেই।

    function AppViewModel() {
    
        // ... leave firstName, lastName, and fullName unchanged here ...
    
        this.capitalizeLastName = function() {
    
        var currentVal = this.lastName();        // Read the current value
    
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    
    };
  4. উদাহরণস্বরূপ আমি প্লাগইনগুলি ব্যবহার করতে চাই আমি পর্যবেক্ষণযোগ্যদের রোলব্যাক করতে সক্ষম হতে চাই যেন কোনও ব্যবহারকারী কোনও অনুরোধ বাতিল করে দেয় যাতে আমি সর্বশেষ মানটিতে ফিরে যেতে সক্ষম হতে চাই। আমার গবেষণা থেকে মনে হয় এটি সম্পাদনাযোগ্যদের মতো প্লাগইন তৈরি করে লোকেরা অর্জন করেছে

    আমি যদি ম্যাপিং ব্যবহার করি তবে আমি কীভাবে এরকম কিছু ব্যবহার করব? আমি সত্যিই এমন কোনও পদ্ধতিতে যেতে চাই না যেখানে আমার ভিউ ম্যানুয়াল ম্যাপিংয়ের ক্ষেত্রে আমি প্রতিটি এমভিসি ভিউমড ফিল্ডটি কেও মডেল ফিল্ডে ম্যাপ করছিলাম কারণ আমি যতটা সম্ভব কম ইনলাইন জাভাস্ক্রিপ্ট চাই এবং এটি ঠিক দ্বিগুণ বলে মনে হচ্ছে এবং এটিই আমি কেন এই ম্যাপিং পছন্দ করি।

  5. আমি উদ্বিগ্ন যে এই কাজটি সহজ করার জন্য (ম্যাপিং ব্যবহার করে) আমি প্রচুর কেও শক্তি হারাব তবে অন্যদিকে আমি উদ্বিগ্ন যে ম্যানুয়াল ম্যাপিংটি কেবলমাত্র অনেক কাজ হবে এবং আমার দৃষ্টিভঙ্গিতে খুব বেশি তথ্য থাকবে এবং ভবিষ্যতে রক্ষণাবেক্ষণ করা আরও শক্ত হয়ে উঠবে (বলুন আমি যদি এমভিসি মডেলের কোনও সম্পত্তি অপসারণ করি তবে আমাকে কেও ভিউমডেলটিতেও স্থানান্তর করতে হবে)


আসল পোস্ট

আমি এসপ নেটওয়্যার এমভিসি 3 ব্যবহার করছি এবং নকআউটটি দেখতে বেশ সুন্দর লাগছে বলে মনে হচ্ছে তবে এটি কীভাবে কাজ করে তা অ্যাপ নেটওয়্যার এমভিসি বিশেষত মডেলগুলির সাথে দেখাতে খুব কঠিন সময় কাটাচ্ছে।

আমার জন্য এখনই আমি এই জাতীয় কিছু করি

 public class CourseVM
    {
        public int CourseId { get; set; }
        [Required(ErrorMessage = "Course name is required")]
        [StringLength(40, ErrorMessage = "Course name cannot be this long.")]
        public string CourseName{ get; set; }


        public List<StudentVm> StudentViewModels { get; set; }

}

আমার একটি ভিএম থাকবে যার কিছু প্রাথমিক বৈশিষ্ট্য রয়েছে যেমন কোর্সনাম এবং এটির উপরে কিছু সাধারণ বৈধতা থাকবে। ভিএম মডেলটিতে প্রয়োজনে এটিতে অন্যান্য ভিউ মডেলও থাকতে পারে।

আমি এই ভিএমটি তখন ভিউতে পাস করতাম যদি আমি এইচটিএমএল সহায়তা ব্যবহারকারীর কাছে এটি প্রদর্শন করতে সহায়তা করতাম।

@Html.TextBoxFor(x => x.CourseName)

ছাত্র ভিউ মডেলগুলির সংগ্রহ থেকে ডেটা বের করার জন্য আমার কাছে কিছু ফোরচ লুপ বা কিছু থাকতে পারে।

তারপরে আমি ফর্মটি জমা দেওয়ার সময় আমি jquery ব্যবহার করব serialize arrayএবং এটি একটি নিয়ামক অ্যাকশন পদ্ধতিতে প্রেরণ করব যা এটিকে আবার ভিউমডেলের সাথে আবদ্ধ করবে।

নকআউট.জেএস সহ এটি এখন অন্যরকম যেমন আপনি এখন এর জন্য ভিউ মডেল পেয়েছেন এবং আমি যে সমস্ত উদাহরণ দেখেছি সেগুলি থেকে তারা এইচটিএমএল সহায়ক ব্যবহার করে না।

আপনি কীভাবে নকআউট.জেএস সহ এমভিসির এই দুটি বৈশিষ্ট্যগুলি ব্যবহার করবেন?

আমি এই ভিডিওটি পেয়েছি এবং এটি সংক্ষেপে ( ভিডিওটির শেষ কয়েক মিনিট @ 18:48) মূলত একটি ইনলাইন স্ক্রিপ্ট রয়েছে যার মধ্যে নকআউট.জেএস ভিউমোডেল রয়েছে যা ভিউমোডেলে মানগুলি নির্ধারিত করে ভিউ মডেলগুলি ব্যবহার করার উপায় হিসাবে চলে।

এটি কি একমাত্র উপায়? আমার উদাহরণটিতে এর মধ্যে ভিউ মডেলগুলির সংকলন কীভাবে হবে? সমস্ত মান বের করে এনে নকআউট হিসাবে নির্ধারিত করার জন্য আমার কাছে কি ফোরচ লুপ বা কিছু থাকতে হবে?

এইচটিএমএল সহায়ক হিসাবে ভিডিও তাদের সম্পর্কে কিছুই বলে না।

এগুলি 2 টি অঞ্চল যা আমার কাছ থেকে হ্যাককে বিভ্রান্ত করে তোলে কারণ অনেক লোক এটি সম্পর্কে কথা বলে মনে হয় না এবং এটি আমাকে প্রাথমিক স্তরের মূল্যবোধগুলি কীভাবে দেখায় তা সম্পর্কে বিভ্রান্ত হয়ে যায় যখন উদাহরণটি কেবলমাত্র কিছু হার্ড কোডিং মান উদাহরণ।


সম্পাদন করা

দারিন দিমিত্রভ যে পরামর্শ দিয়েছেন তার চেষ্টা করছি এবং এটি কাজ করছে বলে মনে হচ্ছে (যদিও তার কোডে আমাকে কিছু পরিবর্তন আনতে হয়েছিল)। আমাকে কেন নথি প্রস্তুত ব্যবহার করতে হয়েছিল তা নিশ্চিত নয় তবে কোনওভাবে এটি ছাড়াই প্রস্তুত ছিল না।

@model MvcApplication1.Models.Test

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
   <script type="text/javascript">

   $(function()
   {
      var model = @Html.Raw(Json.Encode(Model));


// Activates knockout.js
ko.applyBindings(model);
   });

</script>

</head>
<body>
    <div>
        <p>First name: <strong data-bind="text: FirstName"></strong></p>
        <p>Last name: <strong data-bind="text: LastName"></strong></p>
        @Model.FirstName , @Model.LastName
    </div>
</body>
</html>

এটি কাজ করার জন্য আমাকে একটি জেকুরি ডকুমেন্টের চারপাশে মোড়ানো ছিল।

আমিও এই সতর্কতা পেয়েছি। নিশ্চিত যে এটি সম্পর্কে কি।

Warning 1   Conditional compilation is turned off   -> @Html.Raw

সুতরাং আমার কাছে একটি প্রারম্ভিক পয়েন্ট রয়েছে বলে আমি অনুমান করি যে আমি যখন আরও কিছু খেলা চালিয়েছি এবং এটি কীভাবে কাজ করে তবে কমপক্ষে আপডেট হবে।

আমি ইন্টারেক্টিভ টিউটোরিয়ালগুলি দিয়ে যাওয়ার চেষ্টা করছি তবে পরিবর্তে একটি ভিউমডেল ব্যবহার করব।

কীভাবে এই অংশগুলি মোকাবেলা করবেন তা নিশ্চিত নন

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

অথবা

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };


সম্পাদনা 2

আমি প্রথম সমস্যাটি বের করতে সক্ষম হয়েছি। দ্বিতীয় সমস্যা সম্পর্কে কোনও ক্লু নেই। তবুও। কেউ ধারণা পেয়েছে?

 @model MvcApplication1.Models.Test

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <title>Index</title>
        <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
       <script type="text/javascript">

       $(function()
       {
        var model = @Html.Raw(Json.Encode(Model));
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

       });

    </script>

    </head>
    <body>
        <div>
            @*grab values from the view model directly*@
            <p>First name: <strong data-bind="text: FirstName"></strong></p>
            <p>Last name: <strong data-bind="text: LastName"></strong></p>

            @*grab values from my second view model that I made*@
            <p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
            <p>Another <strong data-bind="text: Test2.Another"></strong></p>

            @*allow changes to all the values that should be then sync the above values.*@
            <p>First name: <input data-bind="value: FirstName" /></p>
            <p>Last name: <input data-bind="value: LastName" /></p>
            <p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
            <p>Another <input data-bind="value: Test2.Another" /></p>

           @* seeing if I can do it with p tags and see if they all update.*@
            <p data-bind="foreach: Test3">
                <strong data-bind="text: Test3Value"></strong> 
            </p>

     @*took my 3rd view model that is in a collection and output all values as a textbox*@       
    <table>
        <thead><tr>
            <th>Test3</th>
        </tr></thead>
          <tbody data-bind="foreach: Test3">
            <tr>
                <td>    
                    <strong data-bind="text: Test3Value"></strong> 
<input type="text" data-bind="value: Test3Value"/>
                </td>
            </tr>    
        </tbody>
    </table>

নিয়ামক

  public ActionResult Index()
    {
              Test2 test2 = new Test2
        {
            Another = "test",
            SomeOtherValue = "test2"
        };

        Test vm = new Test
        {
            FirstName = "Bob",
            LastName = "N/A",
             Test2 = test2,

        };
        for (int i = 0; i < 10; i++)
        {
            Test3 test3 = new Test3
            {
                Test3Value = i.ToString()
            };

             vm.Test3.Add(test3);
        }

        return View(vm);
    }

2
আমি আর একটি অনুরূপ প্রশ্নের উত্তর দেওয়ার জন্য একটি ব্লগ পোস্ট লিখেছি: roysvork.wordpress.com/2012/12/09/… এটি আপনার প্রশ্নের পুরোপুরি উত্তর নাও দিতে পারে তবে জিনিসগুলি কীভাবে কাজ করতে পারে তা আপনাকে একটি ভাল ধারণা দেয়। আমি আশা করি খুব দূরের ভবিষ্যতে আরও একটি পোস্ট সহ এটি অনুসরণ করব। আপনার আরও তথ্যের প্রয়োজন হলে পোস্টে বা এখানে মন্তব্যগুলিতে আমাকে নির্দ্বিধায় জিজ্ঞাসা করুন।
কোড

উত্তর:


180

আমার মনে হয় আমি আপনার সমস্ত প্রশ্নের সংক্ষিপ্তসার করেছি, যদি আমি কিছু মিস করি তবে দয়া করে আমাকে জানান ( আপনি যদি আপনার সমস্ত প্রশ্নকে এক জায়গায় সংক্ষিপ্ত করতে পারতেন তবে দুর্দান্ত হবে =))

বিঃদ্রঃ. ko.editableপ্লাগ- ইনয়ের সাথে সামঞ্জস্যতা যুক্ত হয়েছে

সম্পূর্ণ কোডটি ডাউনলোড করুন

আপনি কীভাবে নকআউট.জেএস সহ এইচটিএমএল সহায়ক ব্যবহার করবেন

এটা সহজ:

@Html.TextBoxFor(model => model.CourseId, new { data_bind = "value: CourseId" })

কোথায়:

  • value: CourseIdইঙ্গিত করছে যে বাঁধাই করা হয় valueসম্পত্তির inputসাথে নিয়ন্ত্রণ CourseIdআপনার মডেল থেকে সম্পত্তি এবং আপনার স্ক্রিপ্টটি মডেল

ফলাফল হলো:

<input data-bind="value: CourseId" data-val="true" data-val-number="The field CourseId must be a number." data-val-required="The CourseId field is required." id="CourseId" name="CourseId" type="text" value="12" />

এটিকে কাজ করতে দস্তাবেজের প্রস্তুত কেন প্রয়োজন ছিল (আরও তথ্যের জন্য প্রথম সম্পাদনা দেখুন)

readyমডেলটি সিরিয়াল করতে আপনার কেন ইভেন্টটি ব্যবহার করা দরকার তা আমি এখনও বুঝতে পারি না তবে মনে হয় এটি কেবল প্রয়োজন (যদিও এটি নিয়ে চিন্তা করার দরকার নেই)

আমি যদি আমার ভিউ মডেলগুলির সাথে নকআউট ম্যাপিং ব্যবহার করি তবে কীভাবে আমি এই জাতীয় কিছু করব? ম্যাপিংয়ের কারণে আমার কোনও ফাংশন নেই।

যদি আমি সঠিকভাবে বুঝতে পারি তবে আপনার কেও মডেলটিতে একটি নতুন পদ্ধতি যুক্ত করা দরকার, এটি খুব সহজেই মডেলগুলি মার্জ করা

আরও তথ্যের জন্য, বিভাগে-বিভিন্ন উত্স থেকে ম্যাপিং-

function viewModel() {
    this.addStudent = function () {
        alert("de");
    };
};

$(function () {
    var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
    var mvcModel = ko.mapping.fromJSON(jsonModel);

    var myViewModel = new viewModel();
    var g = ko.mapping.fromJS(myViewModel, mvcModel);

    ko.applyBindings(g);
});

আপনি যে সতর্কতাটি গ্রহণ করেছিলেন তা সম্পর্কে

সতর্কতা 1 শর্তসাপেক্ষ সংকলন বন্ধ করা হয়েছে -> @ এইচটিএমএল। রা

আপনার উদ্ধৃতি ব্যবহার করা দরকার

কো.এডেবলযোগ্য প্লাগ-ইনয়ের সাথে সামঞ্জস্যতা

আমি ভেবেছিলাম এটি আরও জটিল হতে চলেছে, তবে এটি প্রমাণিত হয়েছে যে আপনার মডেলটিকে সম্পাদনযোগ্য করে তুলতে কেবল নীচের লাইনটি যুক্ত করতে ইন্টিগ্রেশনটি সত্যই সহজ:: মনে রাখবেন যে এই ক্ষেত্রে আমি একটি মিশ্র মডেল ব্যবহার করছি, সার্ভার থেকে এবং ক্লায়েন্টে এক্সটেনশন যুক্ত করা এবং সম্পাদনাযোগ্য কেবল কাজ করে ... এটি দুর্দান্ত):

    ko.editable(g);
    ko.applyBindings(g);

এখান থেকে আপনার প্লাগ-ইন দ্বারা যুক্ত এক্সটেনশানগুলি ব্যবহার করে আপনার বাইন্ডিংগুলি দিয়ে খেলতে হবে , উদাহরণস্বরূপ, আমার মতো আমার ক্ষেত্রগুলি সম্পাদনা করার জন্য একটি বোতাম আছে এবং এই বোতামটিতে আমি সম্পাদনা প্রক্রিয়া শুরু করি:

    this.editMode = function () {
        this.isInEditMode(!this.isInEditMode());
        this.beginEdit();
    };

তারপরে আমি নিম্নলিখিত কোড সহ বোতামগুলি প্রতিশ্রুতিবদ্ধ এবং বাতিল করব:

    this.executeCommit = function () {
        this.commit();
        this.isInEditMode(false);
    };
    this.executeRollback = function () {
        if (this.hasChanges()) {
            if (confirm("Are you sure you want to discard the changes?")) {
                this.rollback();
                this.isInEditMode(false);
            }
        }
        else {
            this.rollback();
            this.isInEditMode(false);
        }
    };

এবং পরিশেষে, আমার ক্ষেত্রগুলি সম্পাদনা মোডে রয়েছে কিনা তা নির্দেশ করার জন্য একটি ক্ষেত্র রয়েছে, এটি কেবল সক্ষম সম্পত্তিটিকে বাঁধাই করার জন্য।

this.isInEditMode = ko.observable(false);

আপনার অ্যারে প্রশ্ন সম্পর্কে

ছাত্র ভিউ মডেলগুলির সংগ্রহ থেকে ডেটা বের করার জন্য আমার কাছে কিছু ফোরচ লুপ বা কিছু থাকতে পারে।

তারপরে আমি ফর্মটি জমা দেওয়ার সময় আমি jquery ব্যবহার করব এবং অ্যারে সিরিয়ালাইজ করব এবং এটিকে একটি নিয়ামক অ্যাকশন পদ্ধতিতে প্রেরণ করব যা এটিকে আবার ভিউমডেলের সাথে আবদ্ধ করবে।

আপনি কেও দিয়ে একই কাজ করতে পারেন, নিম্নলিখিত উদাহরণে, আমি নিম্নলিখিত আউটপুট তৈরি করব:

এখানে চিত্র বর্ণনা লিখুন

মূলত এখানে, আপনার দুটি তালিকা রয়েছে, Helpersকেও ব্যবহার করে তৈরি এবং বাঁধাই করা হয়েছে, তাদের একটি dblClickইভেন্ট বাঁধা আছে যে বরখাস্ত করা হলে, নির্বাচিত আইটেমটি বর্তমান তালিকা থেকে সরিয়ে ফেলুন এবং অন্য তালিকায় যুক্ত করুন, যখন আপনি পোস্ট করবেন Controller, প্রতিটি সামগ্রীর তালিকাটি JSON ডেটা হিসাবে প্রেরণ করা হয়েছে এবং সার্ভার মডেলের সাথে পুনরায় সংযুক্ত

অংশটিতে:

বাহ্যিক লিপি

নিয়ামক কোড

    [HttpGet]
    public ActionResult Index()
    {
        var m = new CourseVM { CourseId = 12, CourseName = ".Net" };

        m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });

        return View(m);
    }

    [HttpPost]
    public ActionResult Index(CourseVM model)
    {
        if (!string.IsNullOrWhiteSpace(model.StudentsSerialized))
        {
            model.StudentViewModels = JsonConvert.DeserializeObject<List<StudentVm>>(model.StudentsSerialized);
            model.StudentsSerialized = string.Empty;
        }

        if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized))
        {
            model.SelectedStudents = JsonConvert.DeserializeObject<List<StudentVm>>(model.SelectedStudentsSerialized);
            model.SelectedStudentsSerialized = string.Empty;
        }

        return View(model);
    }

মডেল

public class CourseVM
{
    public CourseVM()
    {
        this.StudentViewModels = new List<StudentVm>();
        this.SelectedStudents = new List<StudentVm>();
    }

    public int CourseId { get; set; }

    [Required(ErrorMessage = "Course name is required")]
    [StringLength(100, ErrorMessage = "Course name cannot be this long.")]
    public string CourseName { get; set; }

    public List<StudentVm> StudentViewModels { get; set; }
    public List<StudentVm> SelectedStudents { get; set; }

    public string StudentsSerialized { get; set; }
    public string SelectedStudentsSerialized { get; set; }
}

public class StudentVm
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Lastname { get; set; }
}

সিএসএইচটিএমএল পৃষ্ঠা

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CourseVM</legend>

        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.CourseId)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseId, new { data_bind = "enable: isInEditMode, value: CourseId" })
                @Html.ValidationMessageFor(model => model.CourseId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.CourseName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseName, new { data_bind = "enable: isInEditMode, value: CourseName" })
                @Html.ValidationMessageFor(model => model.CourseName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StudentViewModels);
            </div>
            <div class="editor-field">

                @Html.ListBoxFor(
                    model => model.StudentViewModels,
                    new SelectList(this.Model.StudentViewModels, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: StudentViewModels, optionsText: 'Name', value: leftStudentSelected, event: { dblclick: moveFromLeftToRight }"
                    }
                )
                @Html.ListBoxFor(
                    model => model.SelectedStudents,
                    new SelectList(this.Model.SelectedStudents, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: SelectedStudents, optionsText: 'Name', value: rightStudentSelected, event: { dblclick: moveFromRightToLeft }"
                    }
                )
            </div>

            @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
            @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })
            @Html.HiddenFor(model => model.StudentsSerialized, new { data_bind = "value: StudentsSerialized" })
            @Html.HiddenFor(model => model.SelectedStudentsSerialized, new { data_bind = "value: SelectedStudentsSerialized" })
        </div>

        <p>
            <input type="submit" value="Save" data-bind="enable: !isInEditMode()" /> 
            <button data-bind="enable: !isInEditMode(), click: editMode">Edit mode</button><br />
            <div>
                <button data-bind="enable: isInEditMode, click: addStudent">Add Student</button>
                <button data-bind="enable: hasChanges, click: executeCommit">Commit</button>
                <button data-bind="enable: isInEditMode, click: executeRollback">Cancel</button>
            </div>
        </p>
    </fieldset>
}

স্ক্রিপ্ট

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ko.editables.js")" type="text/javascript"></script>

<script type="text/javascript">
    var g = null;
    function ViewModel() {
        this.addStudent = function () {
            this.StudentViewModels.push(new Student(25, "my name" + new Date(), "my last name"));
            this.serializeLists();
        };
        this.serializeLists = function () {
            this.StudentsSerialized(ko.toJSON(this.StudentViewModels));
            this.SelectedStudentsSerialized(ko.toJSON(this.SelectedStudents));
        };
        this.leftStudentSelected = ko.observable();
        this.rightStudentSelected = ko.observable();
        this.moveFromLeftToRight = function () {
            this.SelectedStudents.push(this.leftStudentSelected());
            this.StudentViewModels.remove(this.leftStudentSelected());
            this.serializeLists();
        };
        this.moveFromRightToLeft = function () {
            this.StudentViewModels.push(this.rightStudentSelected());
            this.SelectedStudents.remove(this.rightStudentSelected());
            this.serializeLists();
        };
        this.isInEditMode = ko.observable(false);
        this.executeCommit = function () {
            this.commit();
            this.isInEditMode(false);
        };
        this.executeRollback = function () {
            if (this.hasChanges()) {
                if (confirm("Are you sure you want to discard the changes?")) {
                    this.rollback();
                    this.isInEditMode(false);
                }
            }
            else {
                this.rollback();
                this.isInEditMode(false);
            }
        };
        this.editMode = function () {
            this.isInEditMode(!this.isInEditMode());
            this.beginEdit();
        };
    }

    function Student(id, name, lastName) {
        this.ID = id;
        this.Name = name;
        this.LastName = lastName;
    }

    $(function () {
        var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
        var mvcModel = ko.mapping.fromJSON(jsonModel);

        var myViewModel = new ViewModel();
        g = ko.mapping.fromJS(myViewModel, mvcModel);

        g.StudentsSerialized(ko.toJSON(g.StudentViewModels));
        g.SelectedStudentsSerialized(ko.toJSON(g.SelectedStudents));

        ko.editable(g);
        ko.applyBindings(g);
    });
</script>

দ্রষ্টব্য: আমি এই লাইনগুলি কেবল যুক্ত করেছি:

        @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
        @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })

কারণ আমি যখন ফর্মটি জমা দেই তখন আমার ক্ষেত্রগুলি অক্ষম হয়ে যায়, তাই মানগুলি সার্ভারে স্থানান্তরিত হয় নি, এজন্য আমি কৌশলটি করতে কয়েকটি গোপন ক্ষেত্র যুক্ত করেছি why


হুম খুব তথ্যপূর্ণ। আপনার উত্তর এবং পিউলের উত্তর থেকে আমি মনে করি যে সম্পাদনাযোগ্য যেমন প্লাগইন কীভাবে ব্যবহার করতে হয় সে ব্যতীত আমার প্রায় সমস্ত প্রশ্নের উত্তর পেয়ে গেলাম। আশা করি কেউ জানেন যে আমি এটি কীভাবে ব্যবহার করতে পারি।
chobo2

1
আমি কেবল ko.editablesপ্লাগ-
ইনটির

আমি যখন পারব তখন তা যাচাই করে নেব। এটি কাজ করার জন্য কি অনেক কিছু পরিবর্তন করতে হয়েছিল? আমি ভাবছি যে প্রতিটি প্লাগইনটির জন্য যদি আমার সন্ধান হয় তবে আমাকে এটির পরিবর্তন করতে হবে এবং তারপরে আমার নিজস্ব সংস্করণ রাখতে হবে।
chobo2

নাঃ। আপনি অবাক হবেন, এটি বাক্সের বাইরে প্রায় নেই
জুপোল

1
ধন্যবাদ একটি গুচ্ছ মানুষ, আমি আপনার প্রতিক্রিয়া থেকে বেশ কয়েকটি নতুন কৌশল শিখেছি। যশ!
sky-dev

23

আপনি আপনার এএসপি.নেট এমভিসি ভিউ মডেলটিকে জাভাস্ক্রিপ্ট ভেরিয়েবলে সিরিয়ালাইজ করতে পারেন:

@model CourseVM
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // go ahead and use the model javascript variable to bind with ko
</script>

নকআউট ডকুমেন্টেশনে প্রচুর উদাহরণ রয়েছে যা আপনি পেরিয়ে যেতে পারেন।


1
হ্যাঁ, আমি তাদের সাইটে ইন্টারেক্টিভ টিউটোরিয়ালটি দিয়েছি তবে সত্যিকার অর্থে আমি কখনই এসপ নেটওয়্যার এমভিসি এর সাথে কিছুই করতে দেখি না। আমি দেখতে পাচ্ছি যে তাদের কাছে কিছু ম্যাপিং প্লাগইন রয়েছে তবে কীভাবে এটি খাপ খায় তা নিশ্চিত নয় your আপনার উদাহরণে আপনি কীভাবে নকআউট মডেলটিকে (অন্য স্ক্রিপ্টে) আবদ্ধ করবেন। আমি যতটা সম্ভব সামান্য ইনলাইন জাভাস্ক্রিপ্টটি পেতে চাই (অযোগ্য তবে এটি অনুমান করা সম্ভব নয়)
chobo2

2
আপনি কোন সমস্যার সমাধান করার চেষ্টা করছেন? আপনি যদি এমভিসি মতামত চান এবং সেগুলি কীভাবে ব্যবহার করবেন তাতে খুশি হন তবে আপনি সেখানে আটকে থাকতে পারেন। আপনি যদি ক্লায়েন্টের সাইড ডেটা বাইন্ডিং এবং ম্যানিপুলেশন চান তবে কেও দুর্দান্ত পছন্দ is এই উত্তরটি দেখায় আপনি আপনার এমভিসি কোড থেকে আপনার কেও ভিউমডেল তৈরি করতে পারেন। এটি ভিএম নেয় এবং এটি জসন-এ সিরিয়াল করে। তারপরে ক্লায়েন্টের উপর আপনি জাভাস্ক্রিপ্ট ভিউ মডেলটিতে ফলাফলগুলি ম্যাপ করতে পারেন। তারপরে ভিউমোডেলটিকে দৃশ্যে আবদ্ধ করুন এবং আপনি সমস্ত প্রস্তুত। মূল কীটি হ'ল এমভিসি এবং কেও কোনওভাবেই মিলিত হতে হবে না, যদি না আপনি সেগুলি চান। আপনি যে সমস্যার সমাধান করার চেষ্টা করছেন তার উপর এটি নির্ভরশীল।
জন পাপা

1
এপটিউন এমভিসি-র সাথে আপনি কিছু করতে দেখছেন না এটাই স্বাভাবিক। নকআউট একটি ক্লায়েন্টের পাশের কাঠামো। আপনি কোন সার্ভারের সাইড ল্যাঙ্গুয়েজটি ব্যবহার করছেন তা এটি জানেন না বা এটিও গুরুত্ব দেয় না। এই 2 ফ্রেমওয়ার্কগুলি একেবারে ডিউপলড হওয়া উচিত।
দারিন দিমিত্রভ

@ জনপাপা - আমি এখন যেভাবে জিনিসগুলি করি তা পছন্দ করি তবে আমি নতুন জিনিস শিখতেও পছন্দ করি (আমি দেখি কেও কিছু পরিস্থিতিতে খুব দরকারী হতে পারে)। আমি জানি যে কে ক্লায়েন্ট সাইড স্ক্রিপ্ট তবে আমার কাছে আমি তাদের একসাথে কাজ করতে দেখছি। আমি বর্তমানে ভিউ মডেল এবং এইচটিএমএল সহায়ক ব্যবহার করে আমার মতামত উত্পন্ন করি। আমার মনে তাই KO এর সাথে একসাথে কাজ করা প্রয়োজন। উদাহরণস্বরূপ বলুন আপনি সংলাপটি সম্পাদন করেছেন। আপনি কীভাবে সেই ক্ষেত্রগুলিতে একটি ডিবি থেকে মানগুলি ডিজাইন এবং পপুলেট করবেন। আমি যদি আমার উপায়ে ব্যবহার করি তবে এটি এইচটিএমএল সহায়কদের একটি ভিউমোডেল রয়েছে। ভিউমোডেলকে জনবহুল করে এ্যাকশন মেথডের মাধ্যমে প্রেরণ করে এটি ব্যবহার করবে।
chobo2

1
@ চোবো 2, নকআউট একটি ক্লায়েন্টের পাশের কাঠামো। এটি ক্লায়েন্টের এমভিসি প্যাটার্নটি প্রয়োগ করতে ক্লায়েন্টের ভিউ মডেলগুলি ব্যবহার করে। সার্ভার decoupled হয়। আপনি এটিতে দর্শনীয় মডেলগুলিও ব্যবহার করতে পারেন। এটি মাত্র 2 টি আলাদা জায়গা। আপনার যদি জাভাস্ক্রিপ্ট ব্যবহার করে ক্লায়েন্টের উপর প্রয়োগ করতে চান এমন কিছু জটিল যুক্তি থাকে তবে নকআউটটি এটিকে সহজতর করতে পারে। অন্যথায়, সত্যি বলতে, আপনার এটির দরকার নেই।
দারিন দিমিত্রভ

2

সার্ভার ম্যাপিংয়ের পরে অতিরিক্ত গণনা করা বৈশিষ্ট্যগুলি অর্জন করতে আপনাকে ক্লায়েন্টের দিক থেকে আপনার ভিউ মডেলগুলি আরও বাড়িয়ে তুলতে হবে।

উদাহরণ স্বরূপ:

var viewModel = ko.mapping.fromJS(model);

viewModel.capitalizedName = ko.computed(function() {...}, viewModel);

সুতরাং প্রতিবার কাঁচা JSON থেকে ম্যাপ করার সময় আপনাকে গণনা করা বৈশিষ্ট্যগুলি পুনরায় প্রয়োগ করতে হবে।

অতিরিক্তভাবে ম্যাপিং প্লাগইনটি প্রতিবার পিছনে পিছনে যাওয়ার সময় পুনরুত্থানের বিপরীতে ভিউ মডেলটিকে ক্রমান্বয়ে আপডেট করার ক্ষমতা সরবরাহ করে (এতে একটি অতিরিক্ত প্যারামিটার ব্যবহার করুন fromJS):

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

এবং এটি ম্যাপ করা আছে এমন বৈশিষ্ট্যগুলির কেবলমাত্র আপনার মডেলটিতে একটি বর্ধিত তথ্য আপডেট কার্যকর করে। ম্যাপিং ডকুমেন্টেশনে আপনি সে সম্পর্কে আরও পড়তে পারেন

আপনি ডারিনের উত্তর ফ্লুয়েটজেএসএন প্যাকেজ সম্পর্কিত মন্তব্যে উল্লেখ করেছেন । আমি এর লেখক, তবে এর ব্যবহারের ক্ষেত্রে কে.ম্যাপিংয়ের চেয়ে বেশি নির্দিষ্ট। আমি সাধারণত এটি তখনই ব্যবহার করতে পারি যদি আপনার ভিউমোডেলগুলি এক উপায়ে থাকে (যেমন, সার্ভার -> ক্লায়েন্ট) এবং তারপরে ডেটা কিছু আলাদা ফর্ম্যাটে পোস্ট করা হয় (বা একেবারেই নয়)। অথবা যদি আপনার জাভাস্ক্রিপ্ট ভিউ মডেলটি আপনার সার্ভার মডেল থেকে যথেষ্ট আলাদা ফর্ম্যাটে থাকা দরকার।


হুম আমি তখন অনুমান করি ফ্লুয়েন্টজেসন আমার পক্ষে নয় কারণ আমার ভিউ মডেলরা বেশিরভাগ সময় উভয় পথে চলে যান (আমি সাধারণত এটি জাসনের মাধ্যমে ফেরত পাঠাই এবং তারপরে এটি অ্যাকশন পদ্ধতির প্যারামিটারে ভিউমোডেলকে আবদ্ধ করি)। আপনি কি জানেন যে আমি যে প্লাগইনগুলি সম্পাদনার যোগ্য বলেছি তা কীভাবে ব্যবহার করতে পারি? অবশেষে আমি ম্যাপিং ব্যবহার করে এবং আমার ভিউ মডেল বনাম এটি ব্যবহার না করে ব্যবহার করার চেষ্টা করে কোনও ধরণের কার্যকারিতা হারাচ্ছি?
chobo2

আমি কোনও প্লাগইন ব্যবহার করি নি তাই নিশ্চিত নয়। আমি অতীতে যা করেছি তা হ'ল প্রতিটি পরিবর্তনের জন্য সাবস্ক্রাইব করা এবং সিরিয়ালযুক্ত ভিউমডেলের স্ট্যাক রেখে বলা হয়েছে যে আমি পরিবর্তনের দিকে এগিয়ে যাব এবং পূর্বাবস্থায় ফিরতে চাই ( এই প্রশ্নটি দেখুন )।
পল টিং

ম্যাপিং আপনাকে কোনও কার্যকারিতা থেকে বিরত রাখে না, আপনাকে জেএস থেকে ম্যাপিং কীভাবে পরিচালনা করে এবং কীভাবে এটি সমস্ত সুন্দরভাবে একসাথে খেলতে পারে তার জন্য আপনাকে অবশ্যই এটির সম্মেলনগুলি নিশ্চিত করতে হবে এবং এর সম্মেলনগুলি পর্যবেক্ষণ করতে হবে।
পল টিং

আপনার পোস্ট করা প্রশ্নের উত্তরটি হ'ল মূলত প্লাগইনটি কী হবে। এটিই আমাকে বিভ্রান্ত করছে কারণ আপনি দেখতে পাচ্ছেন তারা একটি ভিউমডেল তৈরি করে এবং তারপরে তারা তাদের তৈরি ফাংশনটি ব্যবহার করে (ko.observableArrayWithUndo ([]))। আমি যদি ম্যাপিং করি তবে আমি কীভাবে এটি করব তা জানি না। কেবল মনে মনে আসে আমার নিজের ম্যাপিং লিখুন (এই মুহূর্তে আমার কী সন্দেহ হতে পারে) যেটি পর্যবেক্ষণযোগ্য বা পূর্বে প্রতিটি সম্পত্তি মানচিত্রের বাইরে ফেলা হয়েছে তবে আমার কাছে মূলত সার্ভারসাইডের জন্য নকল ভিডমডেল রয়েছে এবং ক্লায়েন্টের জন্য একটি এবং আমি ভয় পেয়ে গেছে যে
অকল্পনীয়

আহা হ্যাঁ দুঃখিত আমি এই প্রশ্নের আমার উত্তর সম্পর্কে বলছিলাম, দুঃখিতটি সরাসরি যুক্ত হওয়া উচিত ছিল।
পল টিং
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.