Удалить Double Quotes из JSON Property

Я пытаюсь создать интерактивный тур с помощью hopscotch.js. Стандартная структура данных, которую библиотека JavaScript требует, чтобы тур был в работе, выглядит следующим образом:

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

Упорядочение шагов тура непосредственно в библиотеке JavaScript работает отлично, но в идеале я хочу иметь возможность хранить все эти данные в базе данных и использовать AJAX для передачи данных через hopscotch.js. (Это значит, что туры можно создавать динамически, а content можно изменить без выпуска кода).

Все отлично работает, когда мой target использует селектор элементов document.querySelector().

Моя базовая модель С# для каждого этапа тура выглядит следующим образом:

public class MockTourSteps
{
    public string Title { get; set; }
    public string Content { get; set; }
    public string Target { get; set; }
    public string Placement { get; set; }
}

Поскольку target - это строка, мне нужно передать значение в двойных кавычках.

Проблема заключается в том, что когда он сериализуется в JSON, при просмотре страницы с помощью инструментов разработчика Chrome вызывается следующая ошибка:

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

Изучая данные JSON, которые были возвращены на страницу, я вижу, что двойные кавычки вокруг моего document.querySelector() вызывают проблему.

Мне нужно, чтобы эти двойные кавычки были удалены из моего target, когда я указываю target через document.querySelector(), но двойные кавычки должны оставаться, когда я указываю target на основе тега HTML, такого как как header.

Любые идеи, как я могу это достичь?

+3
05 мая '15 в 10:23
источник поделиться
1 ответ

Основная проблема, что в приведенном примере вы используете объект javascript, но вы получите JSON с вашего сервера. Вам нужно будет использовать некоторую обработку JSON на стороне клиента.

Я думаю, вы можете добавить больше информации в свою модель:

public class MockTourStep
{
    public string Title { get; set; }
    public string Content { get; set; }
    public TargetC Target { get; set; }
    public string Placement { get; set; }

    public enum TargetType
    {
        ElementName,
        QuerySelector
    }

    public class TargetC
    {
        [JsonConverter(typeof(StringEnumConverter))]
        public TargetType Type { get; set; }

        public string Value { get; set; } 
    }
}

И пример ответа:

var tour = new
{
    Id = "hello-hopscotch",
    Steps = new List<MockTourStep>
    {
        new MockTourStep
        {
            Title = "My Header",
            Content = "This is the header of my page.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.ElementName,
                Value = "header"
            },
            Placement = "bottom"
        },
        new MockTourStep
        {
            Title = "My content",
            Content = "Here is where I put my content.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.QuerySelector,
                Value = "document.querySelector('#content p')"
            },
            Placement = "bottom"
        }
    }
};

Затем на стороне клиента вы можете проверить тип цели и установить его действительное значение:

$.getJSON("url", function (tour) {
    for (var i = 0; i < tour.steps.length; i++) {
        var step = tour.steps[i];

        switch (step.target.type) {
            case "ElementName":
                step.target = step.target.value;
                break;
            case "QuerySelector":
                step.target = eval(step.target.value);
                break;
            default:
                throw Error;
        }
    }

    hopscotch.startTour(tour);
});

Обратите внимание, что eval используется для QuerySelector. Использование eval опасно, поэтому вам нужно проверить, что вы обслуживаете для клиента.

+1
05 мая '15 в 15:06
источник

Посмотрите другие вопросы по меткам или Задайте вопрос