Привязать объект JSON к элементу HTML - PullRequest
9 голосов
/ 05 марта 2012

Я хочу связать объект JSON с элементом HTML.

, например

У меня есть объект "person" с атрибутами "firstName", "lastName"

<div class="person-list">
  <div class="person-list-item">
    <div>John</div>    ---> bind it to person.firstName
    <div>Smith</div>   ---> bind it to person.lastName
  </div>
</div>

поэтому, если значение элементов HTML будет изменено, то объект субъект также будет обновлен.

это возможно каким-либо образом?

я использую:

  • JQuery
  • ASP.NET MVC 3

Ответы [ 6 ]

14 голосов
/ 05 марта 2012

Если вы будете делать это много в своем приложении, вы можете добавить библиотеку, такую ​​как Knockout.js , которая использует MVVM для выполнения привязок, как вы описываете.

Ваша разметка будет выглядеть примерно так:

<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>

И в вашем JavaScript:

function MyViewModel() {
    this.firstName = "John";
    this.lastName = "Smith";
}

ko.applyBindings(new MyViewModel());

Вы также можете использовать набор данных, если есть много «людей». Попробуйте этот учебник, если хотите узнать, как это сделать: Работа со списками и коллекциями .

Другие полезные ссылки:

3 голосов
/ 05 марта 2012

Сначала добавьте атрибуты id в свою разметку (вы можете сделать это с DOM, но для ясности id s, вероятно, лучше всего подходят для этого примера):

<div class="person-list-item">
   <div id="firstname">John</div>
   <div id="lastname">Smith</div>
</div>

Используйте обработчик событий jQuery для обновления полей всякий раз, когда они изменяются (это неэффективное решение, но оно выполнено - беспокойтесь об оптимизации, когда у вас есть что-то функциональное):

// declare your object
function person(firstn, lastn) {
    this.firstname = firstn;
    this.lastname = lastn;
}

var myGuy = new person("John", "Smith");

$(document).ready(function () {
    $("#firstname").change(function () {
        myGuy.firstname = $("#firstname").val();
    });

    $("#lastname").change(function () {
        myGuy.lastname = $("#lastname").val();
    });

    // etc...
});

Теперь каждый раз при обновлении полей ваш объект будет тоже.

1 голос
/ 18 сентября 2018

Простой односторонний подход с использованием jquery ...

    var resp = your_json_data;
    $(function () {
        $(".jsondata").each(function () {
            $(this).html(eval($(this).attr("data")));
        });
    });

тогда на странице ...

 <span class="jsondata" data="resp.result.formatted_phone_number" />
1 голос
/ 05 марта 2012

Вы можете проанализировать JSON, чтобы превратить его в объект JavaScript:

var data = $.parseJSON(json_string);
// or without jQuery:
var data = JSON.parse(json_string);

Если я правильно понял ваш вопрос, вы должны иметь JSON, который выглядит следующим образом:

[
    {
        "firstName": "John",
        "lastName": "Smith"
    },
    {
        "firstName": "Another",
        "lastName": "Person"
    } // etc
]

Так что вы можете просто перебирать людей так:

$(document).ready(function() {
    var str = '[{"firstName":"John","lastName":"Smith"},{"firstName":"Another","lastName": "Person"}]',
        data = $.parseJSON(str);
    $.each(data, function() {
        var html = '<div class="person-list-item"><div>' + this.firstName + '</div><div>' + this.lastName + '</div></div>';
        $('#person-list').append(html);
     });
});​

Fiddle: http://jsfiddle.net/RgdhX/2/

0 голосов
/ 05 марта 2012

Вы можете использовать одну из библиотек MVC / MVVM, например Backbone.js или Knockoutjs .

0 голосов
/ 05 марта 2012

Я рекомендую взглянуть на Knockout . Настроить привязку данных так, как вы ищете, очень просто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...